<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="apple-touch-icon" sizes="76x76" href="img/apple-icon.png">
	<link rel="icon" type="image/png" href="img/favicon.png">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>Material Kit by Creative Tim</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

	<!--     Fonts and icons     -->
	<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />

	<!-- CSS Files -->
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/material-kit.css" rel="stylesheet"/>

	<!-- CSS Just for demo purpose, don't include it in your project -->
	<link href="assets-for-demo/vertical-nav.css" rel="stylesheet" />
	<link href="assets-for-demo/demo.css" rel="stylesheet" />


</head>

<body class="index-page">
	<nav class="navbar navbar-default navbar-transparent navbar-fixed-top navbar-color-on-scroll" id="sectionsNav">
    	<div class="container">
        	<!-- Brand and toggle get grouped for better mobile display -->
        	<div class="navbar-header">
        		<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example">
            		<span class="sr-only">Toggle navigation</span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
		            <span class="icon-bar"></span>
        		</button>
        		<a class="navbar-brand" href="presentation.html">Material Kit PRO</a>
        	</div>

        	<div class="collapse navbar-collapse" id="navigation-example">
        		<ul class="nav navbar-nav navbar-right">
    				<li>
						<a href="index.html">
							<i class="material-icons">apps</i> Components
						</a>
					</li>

					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="material-icons">view_day</i> Sections
							<b class="caret"></b>
						</a>
						<ul class="dropdown-menu dropdown-with-icons">
							<li>
								<a href="sections.html#headers">
									<i class="material-icons">dns</i> Headers
								</a>
							</li>
							<li>
								<a href="sections.html#features">
									<i class="material-icons">build</i> Features
								</a>
							</li>
							<li>
								<a href="sections.html#blogs">
									<i class="material-icons">list</i> Blogs
								</a>
							</li>
							<li>
								<a href="sections.html#teams">
									<i class="material-icons">people</i> Teams
								</a>
							</li>
							<li>
								<a href="sections.html#projects">
									<i class="material-icons">assignment</i> Projects
								</a>
							</li>
							<li>
								<a href="sections.html#pricing">
									<i class="material-icons">monetization_on</i> Pricing
								</a>
							</li>
							<li>
								<a href="sections.html#testimonials">
									<i class="material-icons">chat</i> Testimonials
								</a>
							</li>
							<li>
								<a href="sections.html#contactus">
									<i class="material-icons">call</i> Contacts
								</a>
							</li>

						</ul>
					</li>

					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="material-icons">view_carousel</i> Examples
							<b class="caret"></b>
						</a>
						<ul class="dropdown-menu dropdown-with-icons">
							<li>
								<a href="examples/about-us.html">
									<i class="material-icons">account_balance</i> About Us
								</a>
							</li>
							<li>
								<a href="examples/blog-post.html">
									<i class="material-icons">art_track</i> Blog Post
								</a>
							</li>
							<li>
								<a href="examples/blog-posts.html">
									<i class="material-icons">view_quilt</i> Blog Posts
								</a>
							</li>
							<li>
								<a href="examples/contact-us.html">
									<i class="material-icons">location_on</i> Contact Us
								</a>
							</li>
							<li>
								<a href="examples/landing-page.html">
									<i class="material-icons">view_day</i> Landing Page
								</a>
							</li>
							<li>
								<a href="examples/login-page.html">
									<i class="material-icons">fingerprint</i> Login Page
								</a>
							</li>
							<li>
								<a href="examples/pricing.html">
									<i class="material-icons">attach_money</i> Pricing Page
								</a>
							</li>
							<li>
								<a href="examples/product-page.html">
									<i class="material-icons">beach_access</i> Product Page
								</a>
							</li>
							<li>
								<a href="examples/profile-page.html">
									<i class="material-icons">account_circle</i> Profile Page
								</a>
							</li>
							<li>
								<a href="examples/signup-page.html">
									<i class="material-icons">person_add</i> Signup Page
								</a>
							</li>
						</ul>
					</li>

					<li>
						<a href="http://www.creative-tim.com/buy/material-kit-pro?ref=presentation" target="_blank" class="btn btn-rose btn-round">
							<i class="material-icons">shopping_cart</i> Buy Now
						</a>
					</li>
        		</ul>
        	</div>
    	</div>
    </nav>

	<div class="page-header header-filter clear-filter" data-parallax="active" style="background-image: url('img/bg0.jpg');">
		<div class="container">
			<div class="row">
				<div class="col-md-8 col-md-offset-2">
					<div class="brand">
						<h1>Material Kit
							<div class="pro-badge">
								Pro
							</div>
						</h1>

						<h3 class="title">All Components</h3>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="main main-raised">
		<div class="section section-basic">
	    	<div class="container">
	            <div class="title">
	                <h2>Basic Elements</h2>
	            </div>

	<!--                 buttons -->
		        <div id="buttons" class="cd-section">
					<div class="title">
						<h3>Buttons <br />
							<small>Pick your style</small>
						</h3>
					</div>
					<div class="row">
						<div class="col-md-8 col-md-offset-2">
							<button class="btn btn-primary">Default</button>
							<button class="btn btn-primary btn-round">Round</button>
							<button class="btn btn-primary btn-round">
								<i class="material-icons">favorite</i> With Icon
							</button>
							<button class="btn btn-primary btn-fab btn-fab-mini btn-round">
								<i class="material-icons">favorite</i>
							</button>
							<button class="btn btn-primary btn-simple">Simple</button>

						</div>
					</div>
					<div class="title">
	                    <h3><small>Pick your size</small></h3>
	                </div>
	                <div class="row">
	                    <div class="col-md-8 col-md-offset-2">
	                        <button class="btn btn-primary btn-xs">x-Small</button>
	                        <button class="btn btn-primary btn-sm">Small</button>
	                        <button class="btn btn-primary">Regular</button>
	                        <button class="btn btn-primary btn-lg">Large</button>
	                    </div>
	                </div>

					<div class="title">
	                    <h3><small> Pick your color </small></h3>
	                </div>
	                <div class="row">
	                    <div class="col-md-8 col-md-offset-2">
	                        <button class="btn">Default</button>
	                        <button class="btn btn-primary">Primary</button>
	                        <button class="btn btn-info">Info</button>
	                        <button class="btn btn-success">Success</button>
	                        <button class="btn btn-warning">Warning</button>
	                        <button class="btn btn-danger">Danger</button>
	                        <button class="btn btn-rose">Rose</button>
	                    </div>
	                </div>
		        </div>
	<!--                 end buttons		         -->
	            <div class="space-50"></div>
	<!--                 social buttons		         -->
	            <div id="social-buttons">
	                <div class="tim-title">
	                	<h3>Social Buttons</h3>
	                </div>
	                <div class="row">
	                   <div class="col-md-3 social-buttons-demo">
	                	   <h3><small> Default </small></h3>
	                		<button class="btn btn-social btn-fill btn-twitter">
	                			<i class="fa fa-twitter"></i> Connect with Twitter
	                		</button><br>
	                		<button class="btn btn-social btn-fill btn-facebook">
	                			<i class="fa fa-facebook-square"></i> Share &middot; 2.2k
	                		</button><br>
	                		<button class="btn btn-social btn-fill btn-google">
	                			<i class="fa fa-google-square"></i> Share on Google+
	                		</button><br>
	                		<button class="btn btn-social btn-fill btn-linkedin">
	                			<i class="fa fa-linkedin-square"></i> Connect with Linkedin
	                		</button><br>
	                		<button class="btn btn-social btn-fill btn-pinterest">
	                			<i class="fa fa-pinterest"></i> Pint it &middot; 212
	                		</button><br>
	                		<button class="btn btn-social btn-fill btn-youtube">
	                			<i class="fa fa-youtube-play"></i> View on Youtube
	                		</button><br>
	                		<button class="btn btn-social btn-fill btn-tumblr">
	                			<i class="fa fa-tumblr-square"></i> Repost
	                		</button><br>
	                		<button class="btn btn-social btn-fill btn-github">
	                			<i class="fa fa-github"></i> Connect with Github
	                		</button><br>
	                		<button class="btn btn-social btn-fill btn-behance">
	                			<i class="fa fa-behance-square"></i> Follow us
	                		</button><br>
	                		<button class="btn btn-social btn-fill btn-dribbble">
	                			<i class="fa fa-dribbble"></i> Find us on Dribble
	                		</button><br>
	                		<button class="btn btn-social btn-fill btn-reddit">
	                			<i class="fa fa-reddit"></i> Repost &middot; 232
	                		</button><br>
	                   </div>
	                   <div class="col-md-1 social-buttons-demo">
	                   <h3><small>&nbsp;</small></h3>
	                		<button class="btn btn-just-icon btn-twitter">
	                			<i class="fa fa-twitter"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon  btn-facebook">
	                			<i class="fa fa-facebook"> </i>
	                		</button><br>
	                		<button class="btn btn-just-icon  btn-google">
	                			<i class="fa fa-google"> </i>
	                		</button><br>
	                		<button class="btn btn-just-icon  btn-linkedin">
	                			<i class="fa fa-linkedin"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon  btn-pinterest">
	                			<i class="fa fa-pinterest"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon  btn-youtube">
	                			<i class="fa fa-youtube"> </i>
	                		</button><br>
	                		<button class="btn btn-just-icon  btn-tumblr">
	                			<i class="fa fa-tumblr"> </i>
	                		</button><br>
	                		<button class="btn btn-just-icon  btn-github">
	                			<i class="fa fa-github"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon  btn-behance">
	                			<i class="fa fa-behance"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon  btn-dribbble">
	                			<i class="fa fa-dribbble"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon  btn-reddit">
	                			<i class="fa fa-reddit"></i>
	                		</button><br>
	                   </div>
	                   <div class="col-md-1 social-buttons-demo">
	                	   <h3><small>&nbsp;</small></h3>
	                		<button class="btn btn-just-icon btn-round btn-twitter">
	                			<i class="fa fa-twitter"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon btn-round btn-facebook">
	                			<i class="fa fa-facebook"> </i>
	                		</button><br>
	                		<button class="btn btn-just-icon btn-round btn-google">
	                			<i class="fa fa-google"> </i>
	                		</button><br>
	                		<button class="btn btn-just-icon btn-round btn-linkedin">
	                			<i class="fa fa-linkedin"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon btn-round btn-pinterest">
	                			<i class="fa fa-pinterest"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon btn-round btn-youtube">
	                			<i class="fa fa-youtube"> </i>
	                		</button><br>
	                		<button class="btn btn-just-icon btn-round btn-tumblr">
	                			<i class="fa fa-tumblr"> </i>
	                		</button><br>
	                		<button class="btn btn-just-icon btn-round btn-github">
	                			<i class="fa fa-github"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon btn-round btn-behance">
	                			<i class="fa fa-behance"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon btn-round btn-dribbble">
	                			<i class="fa fa-dribbble"></i>
	                		</button><br>
	                		<button class="btn btn-just-icon btn-round btn-reddit">
	                			<i class="fa fa-reddit"></i>
	                		</button><br>
	                   </div>
	                   <div class="col-md-1 social-buttons-demo">
	                	   <h3><small>Simple</small></h3>
	                		<button class="btn btn-simple btn-twitter">
	                			<i class="fa fa-twitter"></i>
	                		</button><br>
	                		<button class="btn btn-simple btn-facebook">
	                			<i class="fa fa-facebook-square"> </i>
	                		</button><br>
	                		<button class="btn btn-simple btn-google">
	                			<i class="fa fa-google"> </i>
	                		</button><br>
	                		<button class="btn btn-simple btn-linkedin">
	                			<i class="fa fa-linkedin-square"></i>
	                		</button><br>
	                		<button class="btn btn-simple btn-pinterest">
	                			<i class="fa fa-pinterest"></i>
	                		</button><br>
	                		<button class="btn btn-simple btn-youtube">
	                			<i class="fa fa-youtube"> </i>
	                		</button><br>
	                		<button class="btn btn-simple btn-tumblr">
	                			<i class="fa fa-tumblr-square"> </i>
	                		</button><br>
	                		<button class="btn btn-simple btn-github">
	                			<i class="fa fa-github"></i>
	                		</button><br>
	                		<button class="btn btn-simple btn-behance">
	                			<i class="fa fa-behance"></i>
	                		</button><br>
	                		<button class="btn btn-simple btn-dribbble">
	                			<i class="fa fa-dribbble"></i>
	                		</button><br>
	                		<button class="btn btn-simple btn-reddit">
	                			<i class="fa fa-reddit"></i>
	                		</button><br>
	                   </div>
	                   <div class="col-md-3 social-buttons-demo">
	                	   <h3><small>&nbsp;</small></h3>
	                		<button class="btn btn-simple btn-twitter">
	                			<i class="fa fa-twitter"></i> Connect with Twitter
	                		</button><br>
	                		<button class="btn btn-simple btn-facebook">
	                			<i class="fa fa-facebook-square"></i> Share &middot; 2.2k
	                		</button><br>
	                		<button class="btn btn-simple btn-google">
	                			<i class="fa fa-google-square"></i> Share on Google+
	                		</button><br>
	                		<button class="btn btn-simple btn-linkedin">
	                			<i class="fa fa-linkedin-square"></i> Connect with Linkedin
	                		</button><br>
	                		<button class="btn btn-simple btn-pinterest">
	                			<i class="fa fa-pinterest"></i> Pint it &middot; 212
	                		</button><br>
	                		<button class="btn btn-simple btn-youtube">
	                			<i class="fa fa-youtube-play"></i> View on Youtube
	                		</button><br>
	                		<button class="btn btn-simple btn-tumblr">
	                			<i class="fa fa-tumblr-square"></i> Repost
	                		</button><br>
	                		<button class="btn btn-simple btn-github">
	                			<i class="fa fa-github"></i> Connect with Github
	                		</button><br>
	                		<button class="btn btn-simple btn-behance">
	                			<i class="fa fa-behance-square"></i> Follow us
	                		</button><br>
	                		<button class="btn btn-simple btn-dribbble">
	                			<i class="fa fa-dribbble"></i> Find us on Dribble
	                		</button><br>
	                		<button class="btn btn-simple btn-reddit">
	                			<i class="fa fa-reddit"></i> Repost &middot; 232
	                		</button><br>
	                   </div>
	                </div>
	            </div>
	<!--                 end social buttons -->

	<!--                 inputs -->
		        <div id="inputs">
		            <div class="title">
		                <h3>Inputs</h3>
		            </div>

		            <div class="row">
						<div class="col-sm-3">
		                	<div class="form-group">
		        	        	<input type="text" value="" placeholder="Regular" class="form-control" />
		                	</div>
		                </div>

						<div class="col-sm-3">
							<div class="form-group label-floating">
								<label class="control-label">With Floating Label</label>
								<input type="email" class="form-control">
							</div>
						</div>

		                <div class="col-sm-3">
		                	<div class="form-group label-floating has-success">
								<label class="control-label">Success input</label>
		                    	<input type="text" value="Success" class="form-control" />
								<span class="form-control-feedback">
									<i class="material-icons">done</i>
								</span>
		                	</div>
		                </div>

		                <div class="col-sm-3">
		                	<div class="form-group label-floating has-error">
								<label class="control-label">Error input</label>
		                    	<input type="email" value="Error Input" class="form-control" />
		                    	<span class="material-icons form-control-feedback">clear</span>
		                	</div>
		                </div>

						<div class="col-sm-3">
							<div class="input-group">
								<span class="input-group-addon">
									<i class="material-icons">group</i>
								</span>
								<input type="text" class="form-control" placeholder="With Material Icons">
							</div>
						</div>

						<div class="col-sm-3">
							<div class="input-group">
								<span class="input-group-addon">
									<i class="fa fa-group"></i>
								</span>
								<input type="text" class="form-control" placeholder="With Font Awesome Icons">
							</div>
						</div>
					</div>
				</div>
	<!--                 end inputs -->

				<div class="space-70"></div>

	<!--                 textarea/checkbox/radio/toggle -->
				<div id="checkRadios">
				    <div class="row">
		                <div class="col-sm-3">
		                    <div class="title">
		                        <h3>Checkboxes</h3>
		                    </div>

							<div class="checkbox">
								<label>
									<input type="checkbox" name="optionsCheckboxes">
									Unchecked
								</label>
							</div>

							<div class="checkbox">
								<label>
									<input type="checkbox" name="optionsCheckboxes" checked>
									Checked
								</label>
							</div>

							<div class="checkbox">
								<label>
									<input type="checkbox" name="optionsCheckboxes" disabled>
									Disabled Unchecked
								</label>
							</div>

							<div class="checkbox">
								<label>
									<input type="checkbox" name="optionsCheckboxes" disabled checked>
									Disabled Checked
								</label>
							</div>

		                </div>

		                <div class="col-sm-3">
		                    <div class="title">
		                        <h3>Radio Buttons</h3>
		                    </div>

							<div class="radio">
								<label>
									<input type="radio" name="optionsRadios">
									Radio is off
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadios" checked="true">
									Radio is on
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadiosDisabled" disabled>
									Disabled Radio is off
								</label>
							</div>
							<div class="radio">
								<label>
									<input type="radio" name="optionsRadiosDisabled" checked="true" disabled>
									Disabled Radio is on
								</label>
							</div>
		                </div>

						<div class="col-sm-3">
		                    <div class="title">
		                        <h3>Toggle Buttons</h3>
							</div>

							<div class="togglebutton">
				            	<label>
				                	<input type="checkbox" checked="">
									Toggle is on
				            	</label>
				            </div>

							<div class="togglebutton">
				            	<label>
				                	<input type="checkbox">
									Toggle is off
				            	</label>
				            </div>
		                </div>

		            </div>
		        </div>
	<!-- 				end textarea -->

				<div class="space-70"></div>

	<!--                 select -->
	            <div class="select">
	                <div class="row">
						<div class="col-md-6">
	                        <div class="title">
	                            <h3>Customizable Select</h3>
	                        </div>
							<div class="row">
								<div class="col-md-6">
									<select class="select form-control" placeholder="Choose an option">
		                                <option disabled selected class="disabled"> Choose city</option>
		                                <option value="1">Paris </option>
		                                <option value="1">Bucharest</option>
		                                <option value="1">Rome</option>
		                                <option value="1">New York</option>
		                                <option value="1">Miami </option>
		                                <option value="1">Piatra Neamt</option>
		                                <option value="1">Paris </option>
		                                <option value="1">Bucharest</option>
		                                <option value="1">Rome</option>
		                                <option value="1">New York</option>
		                                <option value="1">Miami </option>
		                                <option value="1">Piatra Neamt</option>
		                                <option value="1">Paris </option>
		                                <option value="1">Bucharest</option>
		                                <option value="1">Rome</option>
		                                <option value="1">New York</option>
		                                <option value="1">Miami </option>
		                                <option value="1">Piatra Neamt</option>
		                            </select>
								</div>
								<div class="col-md-6">
									<select class="select btn btn-raised btn-primary btn-round">
										<option disabled selected> Choose city</option>
										<option value="1">Foobar</option>
										<option value="2">Is great</option>
									</select>
								</div>
							</div>
	                    </div>

						<div class="col-md-3">
	                        <div class="title">
	                            <h3>Dropdown & Dropup</h3>
	                        </div>
							<div class="row">
								<div class="col-md-6">
									<span class="dropdown">
		                              <button href="#pablo" class="dropdown-toggle btn btn-primary btn-round" data-toggle="dropdown">Dropdown <b class="caret"></b></button>
		                              <ul class="dropdown-menu dropdown-menu-right">
		                                <li class="dropdown-header">Dropdown header</li>
		                                <li><a href="#pablo">Action</a></li>
		                                <li><a href="#pablo">Another action</a></li>
		                                <li><a href="#pablo">Something else here</a></li>
		                                <li class="divider"></li>
		                                <li><a href="#pablo">Separated link</a></li>
		                                <li class="divider"></li>
		                                <li><a href="#pablo">One more separated link</a></li>
		                              </ul>
		                            </span>
								</div>
								<div class="col-md-6">
									<span class="dropup">
		                              <button href="#pablo" class="dropdown-toggle btn btn-primary btn-round" data-toggle="dropdown">Dropup <b class="caret"></b></button>
		                              <ul class="dropdown-menu dropdown-menu-right">
		                                <li class="dropdown-header">Dropdown header</li>
		                                <li><a href="#pablo">Action</a></li>
		                                <li><a href="#pablo">Another action</a></li>
		                                <li><a href="#pablo">Something else here</a></li>
		                                <li class="divider"></li>
		                                <li><a href="#pablo">Separated link</a></li>
		                                <li class="divider"></li>
		                                <li><a href="#pablo">One more separated link</a></li>
		                              </ul>
		                            </span>
								</div>
							</div>
	                    </div>
	                </div>
	            </div>
	<!--                 end select -->

				<div class="space-70"></div>

	<!--				 textarea/tags -->

				<div id="textareaTags">
					<div class="row">
						<div class="col-md-6">
	    				    <div class="title">
	    				        <h3>Textarea</h3>
	    				    </div>
	    				    <div class="form-group label-floating">
							    <label class="control-label"> You can write your text here...</label>
							    <textarea class="form-control" rows="5"></textarea>
	                        </div>
					    </div>
						<div class="col-md-6">
							<div class="title">
	                            <h3>Tags</h3>
	                        </div>
	                        <input name="tagsinput" class="tagsinput tag-rose" value="Minimal, Light, New, Friends" />
	                        <!-- You can change "tag-primary" with with "tag-info", "tag-success", "tag-warning","tag-danger" -->
						</div>
					</div>
				</div>

	<!--                 progress/sliders -->
	            <div id="progress">
	                <div class="row">
		                <div class="col-md-6">
		                    <div class="title">
		                        <h3>Progress Bars</h3>
		                    </div>

		                    <div class="progress progress-line-primary">
		                    	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
		                        <span class="sr-only">60% Complete</span>
		                      </div>
		                    </div>

		                    <div class="progress progress-line-info">
		                    	<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
		                    		<span class="sr-only">60% Complete</span>
		                    	</div>
		                    </div>

		                    <div class="progress progress-line-danger">
		                    	<div class="progress-bar progress-bar-success" style="width: 35%">
		                            <span class="sr-only">35% Complete (success)</span>
		                        </div>
		                        <div class="progress-bar progress-bar-warning" style="width: 20%">
		                            <span class="sr-only">20% Complete (warning)</span>
		                        </div>
		                        <div class="progress-bar progress-bar-danger" style="width: 10%">
		                            <span class="sr-only">10% Complete (danger)</span>
		                        </div>
		                    </div>

		                </div>

		                <div class="col-md-6">
		                    <div class="title">
		                        <h3>Pagination</h3>
		                    </div>

		                    <ul class="pagination pagination-primary">
		                    <!--
								color-classes: "pagination-primary", "pagination-info", "pagination-success", "pagination-warning", "pagination-danger"
		                    -->
								<li><a href="javascript:void(0);">1</a></li>
								<li><a href="javascript:void(0);">...</a></li>
								<li><a href="javascript:void(0);">5</a></li>
								<li><a href="javascript:void(0);">6</a></li>
								<li class="active"><a href="javascript:void(0);">7</a></li>
								<li><a href="javascript:void(0);">8</a></li>
								<li><a href="javascript:void(0);">9</a></li>
								<li><a href="javascript:void(0);">...</a></li>
								<li><a href="javascript:void(0);">12</a></li>
		                    </ul>

							<ul class="pagination pagination-info">
								<li><a href="javascript:void(0);"> prev</a></li>
								<li><a href="javascript:void(0);">1</a></li>
								<li><a href="javascript:void(0);">2</a></li>
								<li class="active"><a href="javascript:void(0);">3</a></li>
								<li><a href="javascript:void(0);">4</a></li>
								<li><a href="javascript:void(0);">5</a></li>
								<li><a href="javascript:void(0);">next </a></li>
		                    </ul>


		                </div>
		            </div>
	            </div>
	<!--                 end progress -->

	<!--                 sliders -->
	            <div id="sliders">
	                <div class="row">
	                    <div class="col-md-4">
	                        <div class="title">
		                        <h3>Sliders</h3>
		                    </div>

							<div id="sliderRegular" class="slider"></div>
							<div id="sliderDouble" class="slider slider-info"></div>
	                    </div>
	                    <div class="col-md-6 col-md-offset-2">
	                        <div class="title">
		                        <h3>Labels </h3>
		                    </div>
		                    <span class="label label-default">Default</span>
		                    <span class="label label-primary">Primary</span>
		                    <span class="label label-info">Info</span>
		                    <span class="label label-success">Success</span>
		                    <span class="label label-warning">Warning</span>
		                    <span class="label label-danger">Danger</span>
		                    <span class="label label-rose">Rose</span>
	                    </div>
	                </div>
	            </div>
	<!--                 end sliders -->
	    	</div>
	    </div>

	    <div class="section section-navbars cd-section" id="navigation">
	        <div class="container">

	<!--                 menu -->
				<div class="row">
	                <div class="col-md-6">
	                    <div class="title">
	                        <h3>Menu</h3>
	                    </div>

	                    <nav class="navbar navbar-primary">
	                    	<div class="container-fluid">
	                            <div class="navbar-header">
	                            	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar">
	                            		<span class="sr-only">Toggle navigation</span>
		                                <span class="icon-bar"></span>
		                                <span class="icon-bar"></span>
		                                <span class="icon-bar"></span>
		                            </button>
	                            	<a class="navbar-brand" href="#pablo">Menu</a>
	                            </div>

	                            <div class="collapse navbar-collapse" id="example-navbar">
	                            	<ul class="nav navbar-nav">
	                        			<li class="active"><a href="#pablo">Link</a></li>
	                            		<li><a href="#pablo">Link</a></li>
	                                	<li class="dropdown">
	                                		<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">Dropdown
												<b class="caret"></b>
											</a>
	                                    	<ul class="dropdown-menu dropdown-menu-right">
	                                        	<li class="dropdown-header">Dropdown header</li>
	                                        	<li><a href="#pablo">Action</a></li>
		                                        <li><a href="#pablo">Another action</a></li>
		                                        <li><a href="#pablo">Something else here</a></li>
		                                        <li class="divider"></li>
		                                        <li><a href="#pablo">Separated link</a></li>
		                                        <li class="divider"></li>
		                                        <li><a href="#pablo">One more separated link</a></li>
		                                    </ul>
	                                	</li>
	                            	</ul>
	                            </div>
							</div>
	                    </nav>
	                </div>
	                <div class="col-md-6">
						<div class="title">
	                        <h3>Menu with Icons</h3>
	                    </div>

	                    <nav class="navbar navbar-info">
	                    	<div class="container-fluid">
								<div class="navbar-header">
	                            	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-icons">
		                                <span class="sr-only">Toggle navigation</span>
		                                <span class="icon-bar"></span>
		                                <span class="icon-bar"></span>
		                                <span class="icon-bar"></span>
	                            	</button>
	                            	<a class="navbar-brand" href="#pablo">Icons</a>
	                            </div>

	                            <div class="collapse navbar-collapse" id="example-navbar-icons">
	                            	<ul class="nav navbar-nav navbar-right">
	                        			<li>
											<a href="#pablo"><i class="material-icons">email</i></a>
										</li>
	                            		<li>
											<a href="#pablo"><i class="material-icons">face</i></a>
										</li>
	                                	<li class="dropdown">
	                                		<a href="#pablo" class="dropdown-toggle" data-toggle="dropdown">
												<i class="material-icons">settings</i>
												<b class="caret"></b>
											</a>
	                                    	<ul class="dropdown-menu dropdown-menu-right">
	                                        	<li class="dropdown-header">Dropdown header</li>
	                                        	<li><a href="#pablo">Action</a></li>
		                                        <li><a href="#pablo">Another action</a></li>
		                                        <li><a href="#pablo">Something else here</a></li>
		                                        <li class="divider"></li>
		                                        <li><a href="#pablo">Separated link</a></li>
		                                        <li class="divider"></li>
		                                        <li><a href="#pablo">One more separated link</a></li>
		                                    </ul>
	                                	</li>
	                            	</ul>
	                            </div>
							</div>
	                    </nav>

	                </div>
	            </div>
	<!-- 	            end menu -->

	            <div class="title">
	                <h3>Navigation</h3>
	            </div>
	        </div>
	<!--             navbar -->
	        <div id="navbar">

	            <div class="navigation-example">

	    <!--        rose navbar with search form -->
	                <nav class="navbar navbar-rose">
	                  <div class="container">
	                    <!-- Brand and toggle get grouped for better mobile display -->
	                    <div class="navbar-header">
	                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	                        <span class="sr-only">Toggle navigation</span>
	                        <span class="icon-bar"></span>
	                        <span class="icon-bar"></span>
	                        <span class="icon-bar"></span>
	                      </button>
	                      <a class="navbar-brand" href="#pablo">Brand</a>
	                    </div>

	                    <!-- Collect the nav links, forms, and other content for toggling -->
	                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	                      <ul class="nav navbar-nav">
	                        <li class="active">
	    						<a href="#pablo">Link</a>
	    					</li>
	                        <li>
	    						<a href="#pablo">Link</a>
	    					</li>
	                      </ul>
	                      <form class="navbar-form navbar-right" role="search">
	                        <div class="form-group form-white">
	                          <input type="text" class="form-control" placeholder="Search">
	                        </div>
	                        <button type="submit" class="btn btn-white btn-raised btn-fab btn-fab-mini"><i class="material-icons">search</i></button>
	                      </form>

	                    </div><!-- /.navbar-collapse -->
	                  </div><!-- /.container-fluid -->
	                </nav>
	    <!--        end rose navbar -->

	    <!--        info navbar -->
					<nav class="navbar navbar-info">
						<div class="container">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-info">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<a class="navbar-brand" href="#pablo">Info Color</a>
							</div>

							<div class="collapse navbar-collapse" id="example-navbar-info">
								<ul class="nav navbar-nav navbar-right">
									<li class="active">
		                                <a href="#pablo" >
		                                    Discover
		                                </a>
		                            </li>
		                            <li>
		                                <a href="#pablo">
		                                    Profile
		                                </a>
		                            </li>
		                            <li>
		                                <a href="#pablo">
		                                    Settings
		                                </a>
		                            </li>
								</ul>
							</div>
						</div>
					</nav>
	    <!--        end info navbar -->

	    <!--        primary navbar  -->
					<nav class="navbar navbar-primary">
						<div class="container">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-primary">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<a class="navbar-brand" href="#pablo">Primary Color</a>
							</div>

							<div class="collapse navbar-collapse" id="example-navbar-primary">
								<ul class="nav navbar-nav navbar-right">
									<li class="active">
		                                <a href="#pablo">
											<i class="material-icons">explore</i>
											Discover
		                                </a>
		                            </li>
		                            <li>
		                                <a href="#pablo">
											<i class="material-icons">account_circle</i>
		                                    Profile
		                                </a>
		                            </li>
		                            <li>
		                                <a href="#pablo">
											<i class="material-icons">settings</i>
											Settings
		                                </a>
		                            </li>
								</ul>
							</div>
						</div>
					</nav>
	    <!--        end primary navbar -->

	    <!--         inverse navbar with notifications     -->
	                <nav class="navbar navbar-inverse" role="navigation-demo">
	                  <div class="container">
	                    <!-- Brand and toggle get grouped for better mobile display -->
	                    <div class="navbar-header">
	                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
	                        <span class="sr-only">Toggle navigation</span>
	                        <span class="icon-bar"></span>
	                        <span class="icon-bar"></span>
	                        <span class="icon-bar"></span>
	                      </button>
	                      <a class="navbar-brand" href="#pablo">Navbar with notification</a>
	                    </div>

	                <!-- Collect the nav links, forms, and other content for toggling -->
	                    <div class="collapse navbar-collapse" id="navigation-example-2">
	                      <ul class="nav navbar-nav navbar-right">
	                            <li>
	                                <a href="#pablo">
	                                    Discover
	                                </a>
	                            </li>
	                            <li>
	                                <a href="#pablo">
	                                    Wishlist
	                                </a>
	                            </li>
	                            <li>
	                                <a href="#pablo" class="btn btn-rose btn-raised btn-fab btn-fab-mini" data-toggle="dropdown">
	                                    <i class="material-icons">email</i>
	                                </a>
	                            </li>
	                            <li class="dropdown">
	                                <a href="#pablo" class="profile-photo dropdown-toggle" data-toggle="dropdown">
	                                    <div class="profile-photo-small">
	                                        <img src="img/faces/avatar.jpg" alt="Circle Image" class="img-circle img-responsive">
	                                    </div>
	                                </a>
	                                <ul class="dropdown-menu">
	                                    <li class="dropdown-header">
	                                        Dropdown header
	                                    </li>
	                                    <li>
	                                        <a href="#pablo">Me</a>
	                                    </li>
	                                    <li>
	                                        <a href="#pablo">Settings and other stuff</a>
	                                    </li>
	                                    <li class="divider"></li>
	                                    <li><a href="#pablo">Sign out</a></li>
	                                </ul>
	                            </li>
	                       </ul>
	                    </div><!-- /.navbar-collapse -->
	                  </div><!-- /.container-->
	                </nav>
	    <!--            end inverse navbar -->

	    <!--        default navbar with profile photo -->
	                <nav class="navbar navbar-default" role="navigation-demo">
	                  <div class="container">
	                    <!-- Brand and toggle get grouped for better mobile display -->
	                    <div class="navbar-header">
	                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
	                        <span class="sr-only">Toggle navigation</span>
	                        <span class="icon-bar"></span>
	                        <span class="icon-bar"></span>
	                        <span class="icon-bar"></span>
	                      </button>
	                      <a class="navbar-brand" href="#pablo">Navbar with profile</a>
	                    </div>

	                <!-- Collect the nav links, forms, and other content for toggling -->
	                    <div class="collapse navbar-collapse" id="navigation-example-2">
	                      <ul class="nav navbar-nav navbar-right">
	                            <li>
	                                <a href="#pablo">
	                                    Discover
	                                </a>
	                            </li>
	                            <li>
	                                <a href="#pablo">
	                                    Wishlist
	                                </a>
	                            </li>

	                            <li>
	                                <a href="#pablo" class="btn btn-rose btn-raised btn-round" data-toggle="dropdown">
	                                    Register
	                                </a>
	                            </li>
	                       </ul>
	                    </div><!-- /.navbar-collapse -->
	                  </div><!-- /.container-->
	                </nav>
	    <!--                end default navbar -->

	    <!--        transparent navbar -->
					<nav class="navbar navbar-transparent">
						<div class="container">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-transparent">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<a class="navbar-brand" href="#pablo">Transparent</a>
							</div>

							<div class="collapse navbar-collapse" id="example-navbar-transparent">
								<ul class="nav navbar-nav navbar-right">
									<li>
		                                <a href="#pablo">
		                                    <i class="fa fa-facebook-square"></i>
		                                    Facebook
		                                </a>
		                            </li>
		                            <li>
		                                <a href="#pablo">
		                                    <i class="fa fa-twitter"></i>
		                                    Twitter
		                                </a>
		                            </li>
									<li>
		                                <a href="#pablo">
											<i class="fa fa-instagram"></i> Instagram
		                                </a>
		                            </li>
								</ul>
							</div>
						</div>
					</nav>
	    <!--        end transparent navbar-->

	            </div>
	        </div>
	        <!-- end navbar  -->
		</div>

		<div class="section section-tabs">
			<div class="container">
	<!--                nav tabs	             -->
	            <div id="nav-tabs">
	    	        <h3>Navigation Tabs</h3>
	                <div class="row">
						<div class="col-md-6">
	                        <h3><small>Tabs with Icons on Card</small></h3>

							<!-- Tabs with icons on Card -->
							<div class="card card-nav-tabs">
								<div class="header header-success">
									<!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
									<div class="nav-tabs-navigation">
										<div class="nav-tabs-wrapper">
											<ul class="nav nav-tabs" data-tabs="tabs">
												<li class="active">
													<a href="#profile" data-toggle="tab">
														<i class="material-icons">face</i>
														Profile
													</a>
												</li>
												<li>
													<a href="#messages" data-toggle="tab">
														<i class="material-icons">chat</i>
														Messages
													</a>
												</li>
												<li>
													<a href="#settings" data-toggle="tab">
														<i class="material-icons">build</i>
														Settings
													</a>

												</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="content">
									<div class="tab-content text-center">
										<div class="tab-pane active" id="profile">
											<p> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p>
										</div>
										<div class="tab-pane" id="messages">
											<p> I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
										</div>
										<div class="tab-pane" id="settings">
											<p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
										</div>
									</div>
								</div>
							</div>
							<!-- End Tabs with icons on Card -->

						</div>
						<div class="col-md-6">
	                        <h3><small>Tabs on Plain Card</small></h3>

							<!-- Tabs on Plain Card -->
							<div class="card card-nav-tabs card-plain">
								<div class="header header-danger">
									<!-- colors: "header-primary", "header-info", "header-success", "header-warning", "header-danger" -->
									<div class="nav-tabs-navigation">
										<div class="nav-tabs-wrapper">
											<ul class="nav nav-tabs" data-tabs="tabs">
												<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
												<li><a href="#updates" data-toggle="tab">Updates</a></li>
												<li><a href="#history" data-toggle="tab">History</a></li>
											</ul>
										</div>
									</div>
								</div>
								<div class="content">
									<div class="tab-content text-center">
										<div class="tab-pane active" id="home">
											<p>I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. So when you get something that has the name Kanye West on it, it’s supposed to be pushing the furthest possibilities. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus.</p>
										</div>
										<div class="tab-pane" id="updates">
											<p> I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. </p>
										</div>
										<div class="tab-pane" id="history">
											<p> I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at. I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
										</div>
									</div>
								</div>
							</div>
							<!-- End Tabs on plain Card -->
						</div>
					</div>
	            </div>
	<!-- 	            end nav tabs -->

	<!--                 nav pills -->
		    	<div id="navigation-pills">
		            <div class="title">
	                    <h3>Navigation Pills</h3>
	                </div>
	                <div class="row">
	                    <div class="col-md-6">
	                        <h3><small> Horizontal tabs</small></h3>
	                        <ul class="nav nav-pills nav-pills-rose">
	                          <li class="active"><a href="#pill1" data-toggle="tab">Profile</a></li>
	                          <li><a href="#pill2" data-toggle="tab">Settings</a></li>
	                          <li><a href="#pill3" data-toggle="tab">Options</a></li>
	                        </ul>
	                    	<div class="tab-content tab-space">
	                    	    <div class="tab-pane active" id="pill1">
	                    	      Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
	                    	      <br /><br />
	                    	      Dramatically visualize customer directed convergence without revolutionary ROI.
	                    	    </div>
	                    	    <div class="tab-pane" id="pill2">
	                    	      Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
	                    	      <br /><br />Dramatically maintain clicks-and-mortar solutions without functional solutions.
	                    	    </div>
	                    		<div class="tab-pane" id="pill3">
	                    			Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
	                    			<br /><br />Dynamically innovate resource-leveling customer service for state of the art customer service.
	                    	    </div>
	                    	</div>
	                    </div>
	                    <div class="col-md-6">
	                        <h3><small> Vertical tabs</small></h3>
	                        <div class="row">
	                            <div class="col-md-4">
	                                <ul class="nav nav-pills nav-pills-rose nav-stacked">
	                                  <li class="active"><a href="#tab1" data-toggle="tab">Profile</a></li>
	                                  <li><a href="#tab2" data-toggle="tab">Settings</a></li>
	                                  <li><a href="#tab3" data-toggle="tab">Options</a></li>
	                                </ul>
	                            </div>
	                            <div class="col-md-8">
	                            	<div class="tab-content">
	                            	    <div class="tab-pane active" id="tab1">
	                            	      Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
	                            	      <br /><br />
	                            	      Dramatically visualize customer directed convergence without revolutionary ROI.
	                            	    </div>
	                            	    <div class="tab-pane" id="tab2">
	                            	      Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
	                            	      <br /><br />Dramatically maintain clicks-and-mortar solutions without functional solutions.
	                            	    </div>
	                            		<div class="tab-pane" id="tab3">
	                            			Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
	                            			<br /><br />Dynamically innovate resource-leveling customer service for state of the art customer service.
	                            	    </div>
	                            	</div>
	                            </div>
	                        </div>
	                    </div>
	                </div>

	                <div class="title">
	                    <h3><small>With Icons</small></h3>
	                </div>

	                <div class="row">
	                    <div class="col-md-6">
	                        <ul class="nav nav-pills nav-pills-icons" role="tablist">
	    						<!--
	    							color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
	                            -->
	    						<li>
	    							<a href="#dashboard-1" role="tab" data-toggle="tab">
	    								<i class="material-icons">dashboard</i>
	    								Dashboard
	    							</a>
	    						</li>
	    						<li class="active">
	                                <a href="#schedule-1" role="tab" data-toggle="tab">
	    								<i class="material-icons">schedule</i>
	    								Schedule
	                                </a>
	                            </li>
	                            <li>
	                                <a href="#tasks-1" role="tab" data-toggle="tab">
	    								<i class="material-icons">list</i>
	                                    Tasks
	                                </a>
	                            </li>
	                        </ul>
	                        <div class="tab-content tab-space">
	                    	    <div class="tab-pane active" id="dashboard-1">
	                    	      Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
	                    	      <br /><br />
	                    	      Dramatically visualize customer directed convergence without revolutionary ROI.
	                    	    </div>
	                    	    <div class="tab-pane" id="schedule-1">
	                    	      Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
	                    	      <br /><br />Dramatically maintain clicks-and-mortar solutions without functional solutions.
	                    	    </div>
	                    		<div class="tab-pane" id="tasks-1">
	                    			Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas.
	                    			<br /><br />Dynamically innovate resource-leveling customer service for state of the art customer service.
	                    	    </div>
	                    	</div>

	                    </div>

	                    <div class="col-md-6">
	                        <div class="row">
	                            <div class="col-md-3">
	                                <ul class="nav nav-pills nav-pills-icons nav-stacked" role="tablist">
	            						<!--
	            							color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
	                                    -->
	            						<li class="active">
	            							<a href="#dashboard-2" role="tab" data-toggle="tab">
	            								<i class="material-icons">dashboard</i>
	            								Dashboard
	            							</a>
	            						</li>
	            						<li >
	                                        <a href="#schedule-2" role="tab" data-toggle="tab">
	            								<i class="material-icons">schedule</i>
	            								Schedule
	                                        </a>
	                                    </li>
	                                </ul>
	                            </div>
	                            <div class="col-md-8">
	                                <div class="tab-content">
	                            	    <div class="tab-pane active" id="dashboard-2">
	                            	      Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits.
	                            	      <br /><br />
	                            	      Dramatically visualize customer directed convergence without revolutionary ROI.
	                            	    </div>
	                            	    <div class="tab-pane" id="schedule-2">
	                            	      Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas.
	                            	      <br /><br />Dramatically maintain clicks-and-mortar solutions without functional solutions.
	                            	    </div>
	                            	</div>
	                            </div>
	                        </div>

	                    </div>
	                </div>
		    	</div>
	<!--                 end nav pills -->
			</div>
		</div>


	<!--        notifications -->
	    <div class="section cd-section section-notifications" id="notifications">
	        <div class="container">
				<div class="space-70"></div>
			    <div class="title">
	                <h3>Notifications</h3>
	            </div>
	        </div>

	        <div class="alert alert-info">
	            <div class="container">
					<div class="alert-icon">
						<i class="material-icons">info_outline</i>
					</div>
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true"><i class="material-icons">clear</i></span>
					</button>

	            	<b>Info alert:</b> You've got some friends nearby, stop looking at your phone and find them...
	            </div>
	        </div>
	        <div class="alert alert-success">
	            <div class="container">
					<div class="alert-icon">
						<i class="material-icons">check</i>
					</div>
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true"><i class="material-icons">clear</i></span>
					</button>
	            	<b>Success Alert:</b> Yuhuuu! You've got your $11.99 album from The Weeknd
	            </div>
	        </div>
	        <div class="alert alert-warning">
	             <div class="container">
					 <div class="alert-icon">
						<i class="material-icons">warning</i>
					</div>
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true"><i class="material-icons">clear</i></span>
					</button>
	                 <b>Warning Alert:</b> Hey, it looks like you still have the "copyright &copy;  2015" in your footer. Please update it!
	            </div>
	        </div>
	        <div class="alert alert-danger">
	             <div class="container">
					 <div class="alert-icon">
						<i class="material-icons">error_outline</i>
					</div>
					<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						<span aria-hidden="true"><i class="material-icons">clear</i></span>
					</button>
	                 <b>Error Alert:</b> Damn man! You screwed up the server this time. You should find a good excuse for your Boss...
	            </div>
	        </div>
	        <div class="clearfix"></div>
	    </div>
	<!--        end notifications -->

	    <div class="section section-gray cd-section" id="footers">
	<!--         pre-footer areas -->
		    <div id="pre-footer-areas">
		        <div class="container">
		            <div class="title">
		                <h3>Pre-Footer Areas</h3>
		            </div>
		        </div>

	        	<!--     *********    SIMPLE SOCIAL LINE     *********      -->

	        	<div class="social-line social-line-white text-center">
	        		<div class="container">
	        			<div class="row">
	        				<div class="col-md-12">
	        					<h4 class="title">Thank you for your support!</h4>
	        				</div>
	        					<a href="#pablo" class="btn btn-twitter btn-round">
	        						<i class="fa fa-twitter"></i> Twitter &middot; 2.5k
	        					</a>
	        					<a href="#pablo" class="btn btn-facebook btn-round">
	        						<i class="fa fa-facebook-square"></i> Facebook &middot; 3.2k
	        					</a>
	        					<a href="#pablo" class="btn btn-google btn-round">
	        						<i class="fa fa-google-plus"></i> Google &middot; 1.2k
	        					</a>
	        					<a href="#pablo" class="btn btn-dribbble btn-round">
	        						<i class="fa fa-dribbble"></i> Dribbble &middot; 1.8k
	        					</a>
	        			</div>
	        		</div>
	        	</div>

	        	<!--     *********   SIMPLE SOCIAL LINE     *********      -->

	        	<br /><br />

	        	<!--     *********    SIMPLE SOCIAL LINE     *********      -->

	        	<div class="social-line social-line-big-icons social-line-white">
	        		<div class="container">
	        			<div class="row">
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-twitter">
	        						<i class="fa fa-twitter"></i>
	        					</a>
	        				</div>
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-facebook">
	        						<i class="fa fa-facebook-square"></i>
	        					</a>
	        				</div>
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-google">
	        						<i class="fa fa-google-plus"></i>
	        					</a>
	        				</div>
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-dribbble">
	        						<i class="fa fa-dribbble"></i>
	        					</a>
	        				</div>
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-youtube">
	        						<i class="fa fa-youtube-play"></i>
	        					</a>
	        				</div>
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-instagram">
	        						<i class="fa fa-instagram"></i>
	        					</a>
	        				</div>
	        			</div>
	        		</div>
	        	</div>

	        	<!--     *********   SIMPLE SOCIAL LINE     *********      -->

	        	<br /><br />

	        	<!--     *********    SIMPLE BLACK SOCIAL LINE     *********      -->

	        	<div class="social-line social-line-big-icons social-line-black">
	        		<div class="container">
	        			<div class="row">
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-white">
	        						<i class="fa fa-twitter"></i>
	        					</a>
	        				</div>
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-white">
	        						<i class="fa fa-facebook-square"></i>
	        					</a>
	        				</div>
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-white">
	        						<i class="fa fa-google-plus"></i>
	        					</a>
	        				</div>
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-white">
	        						<i class="fa fa-dribbble"></i>
	        					</a>
	        				</div>
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-white">
	        						<i class="fa fa-youtube-play"></i>
	        					</a>
	        				</div>
	        				<div class="col-md-2">
	        					<a href="#pablo" class="btn btn-simple btn-just-icon btn-white">
	        						<i class="fa fa-instagram"></i>
	        					</a>
	        				</div>
	        			</div>
	        		</div>
	        	</div>

	        	<!--     *********   SIMPLE BLACK SOCIAL LINE     *********      -->

	        	<br /><br />

	        	<!--     *********    IMAGE SUBSCRIBE LINE     *********      -->

	        	<div class="subscribe-line subscribe-line-image" style="background-image: url('img/bg7.jpg');">
	        		<div class="container">
	        			<div class="row">
	        				<div class="col-md-6 col-md-offset-3">
	        					<div class="text-center">
	        						<h3 class="title">Subscribe to our Newsletter</h3>
	        						<p class="description">
	        							Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.
	        						</p>
	        					</div>

	        					<div class="card card-raised card-form-horizontal">
	        						<div class="content">
	        							<form method="" action="">
	        								<div class="row">
	        									<div class="col-sm-8">

	        										<div class="input-group">
	        											<span class="input-group-addon">
	        												<i class="material-icons">mail</i>
	        											</span>
	        											<input type="email" value="" placeholder="Your Email..." class="form-control" />
	        										</div>
	        									</div>
	        									<div class="col-sm-4">
	        										<button type="button" class="btn btn-primary btn-block">Subscribe</button>
	        									</div>
	        								</div>
	        							</form>
	        						</div>
	        					</div>

	        				</div>
	        			</div>
	        		</div>
	        	</div>

	        	<!--     *********   IMAGE SUBSCRIBE LINE     *********      -->

	        	<br /><br />

	        	<!--     *********    SIMPLE SUBSCRIBE LINE     *********      -->

	        	<div class="subscribe-line subscribe-line-white">
	        		<div class="container">
	        			<div class="row">
	        				<div class="col-md-6">
	        					<h3 class="title">Get Tips & Tricks every Week!</h3>
	        					<p class="description">
	        						Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.
	        					</p>
	        				</div>
	        				<div class="col-md-6">
	        					<div class="card card-plain card-form-horizontal">
	        						<div class="content">
	        							<form method="" action="">
	        								<div class="row">
	        									<div class="col-sm-8">

	        										<div class="input-group">
	        											<span class="input-group-addon">
	        												<i class="material-icons">mail</i>
	        											</span>
	        											<input type="email" value="" placeholder="Your Email..." class="form-control" />
	        										</div>
	        									</div>
	        									<div class="col-sm-4">
	        										<button type="button" class="btn btn-rose btn-round btn-block">Subscribe</button>
	        									</div>
	        								</div>
	        							</form>
	        						</div>
	        					</div>

	        				</div>
	        			</div>
	        		</div>
	        	</div>

	        	<!--     *********   SIMPLE SUBSCRIBE LINE     *********      -->

	        	<br /><br />

		    </div>
	<!-- 	    end pre-footer areas -->

	<!--         footer areas	     -->
	        <div class="section">
		        <div class="container">
		            <div class="title">
		                <h3>Footer Areas</h3>
		            </div>
		        </div>

	    	    <div id="footer-areas">

	            	<!--     *********    SIMPLE FOOTER WITH SOCIAL AND BRAND     *********      -->

	            	<footer class="footer footer-white">
	            		<div class="container">
	            			<a class="footer-brand" href="http://www.creative-tim.com">Material Kit PRO</a>

	            			<ul class="pull-center">
	            				<li>
	            					<a href="#pablo">
	            						Creative Tim
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo">
	            					   About Us
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo">
	            					   Blog
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo">
	            						Licenses
	            					</a>
	            				</li>
	            			</ul>

	            			<ul class="social-buttons pull-right">
	            				<li>
	            					<a href="https://twitter.com/CreativeTim" target="_blank" class="btn btn-just-icon btn-simple btn-twitter">
	            						<i class="fa fa-twitter"></i>
	            					</a>
	            				</li>
	            				<li>
	            					<a href="https://www.facebook.com/CreativeTim" target="_blank" class="btn btn-just-icon btn-simple btn-dribbble">
	            						<i class="fa fa-dribbble"></i>
	            					</a>
	            				</li>
	            				<li>
	            					<a href="https://www.instagram.com/CreativeTimOfficial" target="_blank" class="btn btn-just-icon btn-simple btn-google">
	            						<i class="fa fa-google-plus"></i>
	            					</a>
	            				</li>
	            			</ul>

	            		</div>
	            	</footer>

	            	<!--     *********   END SIMPLE FOOTER WITH SOCIAL AND BRAND     *********      -->

	            	<br /><br />

	            	<!--     *********    SIMPLE FOOTER     *********      -->

	            	<footer class="footer">
	            		<div class="container">
	            			<nav class="pull-left">
	            				<ul>
	            					<li>
	            						<a href="http://www.creative-tim.com">
	            							Creative Tim
	            						</a>
	            					</li>
	            					<li>
	            						<a href="http://presentation.creative-tim.com">
	            						   About Us
	            						</a>
	            					</li>
	            					<li>
	            						<a href="http://blog.creative-tim.com">
	            						   Blog
	            						</a>
	            					</li>
	            					<li>
	            						<a href="http://www.creative-tim.com/license">
	            							Licenses
	            						</a>
	            					</li>
	            				</ul>
	            			</nav>
	            			<div class="copyright pull-right">
	            				&copy; <script>document.write(new Date().getFullYear())</script>, made with <i class="material-icons">favorite</i> by Creative Tim for a better web.
	            			</div>
	            		</div>
	            	</footer>

	            	<!--     *********   END SIMPLE FOOTER     *********      -->

	            	<br /><br />

	            	<!--     *********    BLACK SIMPLE FOOTER WITH SOCIAL AND BRAND     *********      -->

	            	<footer class="footer footer-black">
	            		<div class="container">
	            			<a class="footer-brand" href="#pablo">Material Kit PRO</a>


	            			<ul class="pull-center">
	            				<li>
	            					<a href="#pablo">
	            					   Blog
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo">
	            						Presentation
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo">
	            					   Discover
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo">
	            						Payment
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo">
	            						Contact Us
	            					</a>
	            				</li>
	            			</ul>

	            			<ul class="social-buttons pull-right">
	            				<li>
	            					<a href="https://twitter.com/CreativeTim" target="_blank" class="btn btn-just-icon btn-simple">
	            						<i class="fa fa-twitter"></i>
	            					</a>
	            				</li>
	            				<li>
	            					<a href="https://www.facebook.com/CreativeTim" target="_blank" class="btn btn-just-icon btn-simple">
	            						<i class="fa fa-facebook-square"></i>
	            					</a>
	            				</li>
	            				<li>
	            					<a href="https://www.instagram.com/CreativeTimOfficial" target="_blank" class="btn btn-just-icon btn-simple">
	            						<i class="fa fa-instagram"></i>
	            					</a>
	            				</li>
	            			</ul>

	            		</div>
	            	</footer>

	            	<!--     *********   END BLACK SIMPLE FOOTER WITH SOCIAL AND BRAND     *********      -->

	            	<br/><br/>

					<!--     *********    BIG FOOTER     *********      -->

					<footer class="footer footer-black footer-big">
						<div class="container">

							<div class="content">
								<div class="row">
									<div class="col-md-4">
										<h5>About Us</h5>
										<p>Creative Tim is a startup that creates design tools that make the web development process faster and easier. </p> <p>We love the web and care deeply for how users interact with a digital product. We power businesses and individuals to create better looking web projects around the world. </p>
									</div>

									<div class="col-md-4">
										<h5>Social Feed</h5>
										<div class="social-feed">
											<div class="feed-line">
												<i class="fa fa-twitter"></i>
												<p>How to handle ethical disagreements with your clients.</p>
											</div>
											<div class="feed-line">
												<i class="fa fa-twitter"></i>
												<p>The tangible benefits of designing at 1x pixel density.</p>
											</div>
											<div class="feed-line">
												<i class="fa fa-facebook-square"></i>
												<p>A collection of 25 stunning sites that you can use for inspiration.</p>
											</div>
										</div>
									</div>

									<div class="col-md-4">
										<h5>Instagram Feed</h5>
										<div class="gallery-feed">
											<img src="img/faces/card-profile6-square.jpg" class="img img-raised img-rounded" alt="" />
											<img src="img/faces/christian.jpg" class="img img-raised img-rounded" alt="" />
											<img src="img/faces/card-profile4-square.jpg" class="img img-raised img-rounded" alt="" />
											<img src="img/faces/card-profile1-square.jpg" class="img img-raised img-rounded" alt="" />

											<img src="img/faces/marc.jpg" class="img img-raised img-rounded" alt="" />
											<img src="img/faces/kendall.jpg" class="img img-raised img-rounded" alt="" />
											<img src="img/faces/card-profile5-square.jpg" class="img img-raised img-rounded" alt="" />
											<img src="img/faces/card-profile2-square.jpg" class="img img-raised img-rounded" alt="" />
										</div>

									</div>
								</div>
							</div>


							<hr />

							<ul class="pull-left">
								<li>
									<a href="#pablo">
									   Blog
									</a>
								</li>
								<li>
									<a href="#pablo">
										Presentation
									</a>
								</li>
								<li>
									<a href="#pablo">
									   Discover
									</a>
								</li>
								<li>
									<a href="#pablo">
										Payment
									</a>
								</li>
								<li>
									<a href="#pablo">
										Contact Us
									</a>
								</li>
							</ul>

							<div class="copyright pull-right">
								Copyright &copy; <script>document.write(new Date().getFullYear())</script> Creative Tim All Rights Reserved.
							</div>
						</div>
					</footer>

					<!--     *********   END BIG FOOTER     *********      -->

	            	<br /><br />

	            	<!--     *********    BIG WHITE FOOTER     *********      -->

	            	<footer class="footer footer-white footer-big">
	            		<div class="container">

	            			<div class="content">
	            				<div class="row">
	            					<div class="col-md-2">
	            						<h5>About Us</h5>
	            						<ul class="links-vertical">
	            							<li>
	            								<a href="#pablo">
	            								   Blog
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            								   About Us
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									Presentation
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									Contact Us
	            								</a>
	            							</li>
	            						</ul>
	            					</div>
	            					<div class="col-md-2">
	            						<h5>Market</h5>
	            						<ul class="links-vertical">
	            							<li>
	            								<a href="#pablo">
	            								   Sales FAQ
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									How to Register
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            								   Sell Goods
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									Receive Payment
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									Transactions Issues
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									Affiliates Program
	            								</a>
	            							</li>
	            						</ul>
	            					</div>

	            					<div class="col-md-4">
	            						<h5>Social Feed</h5>
	            						<div class="social-feed">
	            							<div class="feed-line">
	            								<i class="fa fa-twitter"></i>
	            								<p>How to handle ethical disagreements with your clients.</p>
	            							</div>
	            							<div class="feed-line">
	            								<i class="fa fa-twitter"></i>
	            								<p>The tangible benefits of designing at 1x pixel density.</p>
	            							</div>
	            							<div class="feed-line">
	            								<i class="fa fa-facebook-square"></i>
	            								<p>A collection of 25 stunning sites that you can use for inspiration.</p>
	            							</div>
	            						</div>
	            					</div>

	            					<div class="col-md-4">
	            						<h5>Follow Us</h5>
	            						<ul class="social-buttons">
	            							<li>
	            								<a href="#pablo" class="btn btn-just-icon btn-simple btn-twitter">
	            									<i class="fa fa-twitter"></i>
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo" class="btn btn-just-icon btn-simple btn-facebook">
	            									<i class="fa fa-facebook-square"></i>
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo" class="btn btn-just-icon btn-simple btn-dribbble">
	            									<i class="fa fa-dribbble"></i>
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo" class="btn btn-just-icon btn-simple btn-google">
	            									<i class="fa fa-google-plus"></i>
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo" class="btn btn-just-icon btn-simple btn-instagram">
	            									<i class="fa fa-instagram"></i>
	            								</a>
	            							</li>
	            						</ul>

	            						<h5>Numbers Don't Lie</h5>
	            						<h4 class="text-muted">14.521 <small>Freelancers</small></h4>
	            						<h4>1.423.183 <small>Transactions</small></h4>
	            					</div>
	            				</div>
	            			</div>

	            			<hr />

	            			<div class="copyright pull-center">
	            				Copyright &copy; <script>document.write(new Date().getFullYear())</script> Creative Tim All Rights Reserved.
	            			</div>
	            		</div>
	            	</footer>

	            	<!--     *********   END BIG WHITE FOOTER     *********      -->

	            	<br /><br />

	            	<!--     *********    BIG WHITE FOOTER V2     *********      -->

	            	<footer class="footer footer-white footer-big">
	            		<div class="container">

	            			<div class="content">
	            				<div class="row">

	            					<div class="col-md-3">
	            						<a href="#pablo"><h5>Material Kit PRO</h5></a>
	            						<p>Probably the best UI Kit in the world! We know you've been waiting for it, so don't be shy!</p>
	            					</div>
	            					<div class="col-md-2">
	            						<h5>About</h5>
	            						<ul class="links-vertical">
	            							<li>
	            								<a href="#pablo">
	            								   Blog
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            								   About Us
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									Presentation
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									Contact Us
	            								</a>
	            							</li>
	            						</ul>
	            					</div>
	            					<div class="col-md-2">
	            						<h5>Market</h5>
	            						<ul class="links-vertical">
	            							<li>
	            								<a href="#pablo">
	            								   Sales FAQ
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									How to Register
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            								   Sell Goods
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									Receive Payment
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									Transactions Issues
	            								</a>
	            							</li>
	            						</ul>
	            					</div>

	            					<div class="col-md-2">
	            						<h5>Legal</h5>
	            						<ul class="links-vertical">
	            							<li>
	            								<a href="#pablo">
	            								   Transactions FAQ
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            									Terms & Conditions
	            								</a>
	            							</li>
	            							<li>
	            								<a href="#pablo">
	            								   Licenses
	            								</a>
	            							</li>
	            						</ul>
	            					</div>
	            					<div class="col-md-3">
	            						<h5>Subscribe to Newsletter</h5>
	            						<p>
	            							Join our newsletter and get news in your inbox every week! We hate spam too, so no worries about this.
	            						</p>
	            						<form class="form form-newsletter" method="" action="">

	            							<div class="form-group">
	            								<input type="email" class="form-control" placeholder="Your Email...">
	            							</div>

	            							<button type="button" class="btn btn-primary btn-just-icon" name="button">
	            								<i class="material-icons">mail</i>
	            							</button>

	            						</form>
	            					</div>

	            				</div>
	            			</div>

	            			<hr />

	            			<ul class="social-buttons">
	            				<li>
	            					<a href="#pablo" class="btn btn-just-icon btn-simple btn-twitter">
	            						<i class="fa fa-twitter"></i>
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo" class="btn btn-just-icon btn-simple btn-facebook">
	            						<i class="fa fa-facebook-square"></i>
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo" class="btn btn-just-icon btn-simple btn-dribbble">
	            						<i class="fa fa-dribbble"></i>
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo" class="btn btn-just-icon btn-simple btn-google">
	            						<i class="fa fa-google-plus"></i>
	            					</a>
	            				</li>
	            				<li>
	            					<a href="#pablo" class="btn btn-just-icon btn-simple btn-youtube">
	            						<i class="fa fa-youtube-play"></i>
	            					</a>
	            				</li>
	            			</ul>

	            			<div class="copyright pull-center">
	            				Copyright &copy; <script>document.write(new Date().getFullYear())</script> Creative Tim All Rights Reserved.
	            			</div>
	            		</div>
	            	</footer>

	            	<!--     *********   END BIG WHITE FOOTER v2     *********      -->

	    	    </div>
		    </div>
	<!--         footer areas         -->
	    </div>

	    <div class="section">
	        <div class="container tim-container">

	<!--     	        typography -->
	            <div id="typography" class="cd-section">
		            <div class="title">
	                    <h2>Typography</h2>
	                </div>
	                <div class="row">
	                    <div class="tim-typo">
	                        <h1><span class="tim-note">Header 1</span>The Life of Material Kit </h1>
	                    </div>
	                    <div class="tim-typo">
	                        <h2><span class="tim-note">Header 2</span>The Life of Material Kit</h2>
	                    </div>
	                    <div class="tim-typo">
	                        <h3><span class="tim-note">Header 3</span>The Life of Material Kit</h3>
	                    </div>
	                    <div class="tim-typo">
	                        <h4><span class="tim-note">Header 4</span>The Life of Material Kit</h4>
	                    </div>
	                    <div class="tim-typo">
	                        <h5><span class="tim-note">Header 5</span>The Life of Material Kit</h5>
	                    </div>
	                    <div class="tim-typo">
	                        <h6><span class="tim-note">Header 6</span>The Life of Material Kit</h6>
	                    </div>
						<div class="tim-typo">
	                        <h1 class="title"><span class="tim-note">Header 1 Title</span>The Life of Material Kit </h1>
	                    </div>
	                    <div class="tim-typo">
	                        <h2 class="title"><span class="tim-note">Header 2 Title</span>The Life of Material Kit</h2>
	                    </div>
	                    <div class="tim-typo">
	                        <h3 class="title"><span class="tim-note">Header 3 Title</span>The Life of Material Kit</h3>
	                    </div>
	                    <div class="tim-typo">
	                        <h4 class="title"><span class="tim-note">Header 4 Title</span>The Life of Material Kit</h4>
	                    </div>
	                    <div class="tim-typo">
	                        <p><span class="tim-note">Paragraph</span>
	                            I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.</p>
	                    </div>
	                    <div class="tim-typo">
	                        <span class="tim-note">Quote</span>
	                        <blockquote>
	                         <p>
	                         I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at.
	                         </p>
	                         <small>
	                         Kanye West, Musician
	                         </small>
	                        </blockquote>
	                    </div>

	                    <div class="tim-typo">
	                        <span class="tim-note">Muted Text</span>
	                        <p class="text-muted">
	                        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
						    </p>
	                    </div>
	                    <div class="tim-typo">
	                        <span class="tim-note">Primary Text</span>
	                        <p class="text-primary">
	                        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
	                    </div>
	                    <div class="tim-typo">
	                        <span class="tim-note">Info Text</span>
	                        <p class="text-info">
	                        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
	                    </div>
	                    <div class="tim-typo">
	                        <span class="tim-note">Success Text</span>
	                        <p class="text-success">
	                        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
	                    </div>
	                    <div class="tim-typo">
	                        <span class="tim-note">Warning Text</span>
	                        <p class="text-warning">
	                        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...
	                        </p>
	                    </div>
	                    <div class="tim-typo">
	                        <span class="tim-note">Danger Text</span>
	                        <p class="text-danger">
	                        I will be the leader of a company that ends up being worth billions of dollars, because I got the answers...                        </p>
	                    </div>
	                    <div class="tim-typo">
	                        <h2><span class="tim-note">Small Tag</span>
								Header with small subtitle <br>
								<small>Use "small" tag for the headers</small>
							</h2>
	                    </div>
	                </div>
	            </div>
	<!--                 end typography -->

				<div class="space-50"></div>

	<!--                 images -->
	            <div id="images">
	                 <div class="title">
	                    <h2>Images</h2>
	                </div>
	                <br>
	                <div class="row">
						<div class="col-sm-2">
	                        <h4>Rounded Image</h4>
	                        <img src="img/faces/avatar.jpg" alt="Rounded Image" class="img-rounded img-responsive">
	                    </div>
						<div class="col-sm-2 col-sm-offset-1">
	                        <h4>Circle Image</h4>
	                        <img src="img/faces/avatar.jpg" alt="Circle Image" class="img-circle img-responsive">
	                    </div>
						<div class="col-sm-2 col-sm-offset-1">
	                        <h4>Rounded Raised</h4>
	                        <img src="img/faces/avatar.jpg" alt="Raised Image" class="img-rounded img-responsive img-raised">
	                    </div>

	                    <div class="col-sm-2 col-sm-offset-1">
	                        <h4>Circle Raised</h4>
	                        <img src="img/faces/avatar.jpg" alt="Thumbnail Image" class="img-circle img-raised img-responsive">
	                    </div>
	                </div>
	                <div class="row">

	                </div>
	            </div>
	<!--                 end images	             -->

	            <div class="space-50"></div>

				<div id="contentAreas" class="cd-section">


					<h2>Content Areas</h2>

		<!--                 tables -->
		            <div id="tables">
		                <div class="title">
		                    <h3>Tables</h3>
		                </div>
		                <div class="row">
		                    <div class="col-md-12">
		                        <h4>Simple Table</h4>
		                    </div>
		                    <div class="col-md-8 col-md-offset-2">
		                    <h4><small>Simple With Actions</small></h4>
		                        <div class="table-responsive">
		                        <table class="table">
		                            <thead>
		                                <tr>
		                                    <th class="text-center">#</th>
		                                    <th>Name</th>
		                                    <th>Job Position</th>
		                                    <th>Since</th>
		                                    <th class="text-right">Salary</th>
		                                    <th class="text-right">Actions</th>
		                                </tr>
		                            </thead>
		                            <tbody>
		                                <tr>
		                                    <td class="text-center">1</td>
		                                    <td>Andrew Mike</td>
		                                    <td>Develop</td>
		                                    <td>2013</td>
		                                    <td class="text-right">&euro; 99,225</td>
		                                    <td class="td-actions text-right">
		                                        <button type="button" rel="tooltip" class="btn btn-info">
		                                            <i class="material-icons">person</i>
		                                        </button>
		                                        <button type="button" rel="tooltip" class="btn btn-success">
		                                            <i class="material-icons">edit</i>
		                                        </button>
		                                        <button type="button" rel="tooltip" class="btn btn-danger">
		                                            <i class="material-icons">close</i>
		                                        </button>
		                                    </td>
		                                </tr>
		                                <tr>

		                                    <td class="text-center">2</td>
		                                    <td>John Doe</td>
		                                    <td>Design</td>
		                                    <td>2012</td>
		                                    <td class="text-right">&euro; 89,241</td>
		                                    <td class="td-actions text-right">
		                                        <button type="button" rel="tooltip" class="btn btn-info btn-round">
		                                            <i class="material-icons">person</i>
		                                        </button>
		                                        <button type="button" rel="tooltip" class="btn btn-success btn-round">
		                                            <i class="material-icons">edit</i>
		                                        </button>
		                                        <button type="button" rel="tooltip" class="btn btn-danger btn-round">
		                                            <i class="material-icons">close</i>
		                                        </button>
		                                    </td>
		                                </tr>
		                                <tr>
		                                    <td class="text-center">3</td>
		                                    <td>Alex Mike</td>
		                                    <td>Design</td>
		                                    <td>2010</td>
		                                    <td class="text-right">&euro; 92,144</td>
		                                    <td class="td-actions text-right">
		                                        <button type="button" rel="tooltip" class="btn btn-info btn-simple">
		                                            <i class="material-icons">person</i>
		                                        </button>
		                                        <button type="button" rel="tooltip" class="btn btn-success btn-simple">
		                                            <i class="material-icons">edit</i>
		                                        </button>
		                                        <button type="button" rel="tooltip" class="btn btn-danger btn-simple">
		                                            <i class="material-icons">close</i>
		                                        </button>
		                                    </td>
		                                </tr>
		                                <tr>
		                                    <td class="text-center">4</td>
		                                    <td>Mike Monday</td>
		                                    <td>Marketing</td>
		                                    <td>2013</td>
		                                    <td class="text-right">&euro; 49,990</td>
		                                    <td class="td-actions text-right">
		                                        <button type="button" rel="tooltip" class="btn btn-info btn-round">
		                                            <i class="material-icons">person</i>
		                                        </button>
		                                        <button type="button" rel="tooltip" class="btn btn-success btn-round">
		                                            <i class="material-icons">edit</i>
		                                        </button>
		                                        <button type="button" rel="tooltip" class="btn btn-danger btn-round">
		                                            <i class="material-icons">close</i>
		                                        </button>
		                                    </td>
		                                </tr>
		                                <tr>
		                                    <td class="text-center">5</td>
		                                    <td>Paul Dickens</td>
		                                    <td>Communication</td>
		                                    <td>2015</td>
		                                    <td class="text-right">&euro; 69,201</td>
		                                    <td class="td-actions text-right">
		                                        <button type="button" rel="tooltip" class="btn btn-info">
		                                            <i class="material-icons">person</i>
		                                        </button>
		                                        <button type="button" rel="tooltip" class="btn btn-success">
		                                            <i class="material-icons">edit</i>
		                                        </button>
		                                        <button type="button" rel="tooltip" class="btn btn-danger">
		                                            <i class="material-icons">close</i>
		                                        </button>
		                                    </td>
		                                </tr>
		                            </tbody>
		                        </table>
		                        </div>

		                        <h4><small>Striped With Checkboxes</small></h4>
		                        <div class="table-responsive">
		                        <table class="table table-striped">
		                            <thead>
		                                <tr>
		                                    <th class="text-center">#</th>
		                                    <th></th>
		                                    <th>Product Name</th>
		                                    <th>Type</th>
		                                    <th>Qty</th>
		                                    <th class="text-right">Price</th>
		                                    <th class="text-right">Amount</th>
		                                </tr>
		                            </thead>
		                            <tbody>
		                                <tr>
		                                    <td class="text-center">1</td>
		                                    <td>
		                                        <div class="checkbox">
		            								<label>
		            									<input type="checkbox" name="optionsCheckboxes" checked>
		            								</label>
		                                        </div>
		                                    </td>
		                                    <td>Moleskine Agenda</td>
		                                    <td>Office</td>
		                                    <td>25</td>
		                                    <td class="text-right">&euro; 49</td>
		                                    <td class="text-right">&euro; 1,225</td>
		                                </tr>
		                                <tr>

		                                    <td class="text-center">2</td>
		                                    <td>
		                                        <div class="checkbox">
		            								<label>
		            									<input type="checkbox" name="optionsCheckboxes" checked>
		            								</label>
		                                        </div>
		                                    </td>
		                                    <td>Stabilo Pen</td>
		                                    <td>Office</td>
		                                    <td>30</td>
		                                    <td class="text-right">&euro; 10</td>
		                                    <td class="text-right">&euro; 300</td>
		                                </tr>
		                                <tr>

		                                    <td class="text-center">3</td>
		                                    <td>
		                                        <div class="checkbox">
		            								<label>
		            									<input type="checkbox" name="optionsCheckboxes" checked>
		            								</label>
		                                        </div>
		                                    </td>
		                                    <td>A4 Paper Pack</td>
		                                    <td>Office</td>
		                                    <td>50</td>
		                                    <td class="text-right">&euro; 10.99</td>
		                                    <td class="text-right">&euro; 109</td>
		                                </tr>
		                                <tr>

		                                    <td class="text-center">4</td>
		                                    <td>
		                                        <div class="checkbox">
		            								<label>
		            									<input type="checkbox" name="optionsCheckboxes">
		            								</label>
		                                        </div>
		                                    </td>
		                                    <td>Apple iPad</td>
		                                    <td>Meeting</td>
		                                    <td>10</td>
		                                    <td class="text-right">&euro; 499.00</td>
		                                    <td class="text-right">&euro; 4,990</td>
		                                </tr>
		                                <tr>

		                                    <td class="text-center">5</td>
		                                    <td>
		                                        <div class="checkbox">
		            								<label>
		            									<input type="checkbox" name="optionsCheckboxes">
		            								</label>
		                                        </div>
		                                    </td>
		                                    <td>Apple iPhone</td>
		                                    <td>Communication</td>
		                                    <td>10</td>
		                                    <td class="text-right">&euro; 599.00</td>
		                                    <td class="text-right">&euro; 5,999</td>
		                                </tr>
		                                <tr>
		                                    <td colspan="5"></td>
		                                    <td class="td-total">
		                                        Total
		                                    </td>
		                                    <td class="td-price">
		                                        <small>&euro;</small>12,999
		                                    </td>
		                                </tr>
		                            </tbody>
		                        </table>
		                        </div>

		                    </div>
		                </div>
		                <div class="row">
		                    <div class="col-md-12">
		                        <h4>Shopping Cart Table</h4>
		                    </div>
		                    <div class="col-md-10 col-md-offset-1">
		                        <div class="table-responsive">
		                        <table class="table table-shopping">
		                            <thead>
		                                <tr>
		                                    <th class="text-center"></th>
		                                    <th >Product</th>
		                                    <th class="th-description">Color</th>
		                                    <th class="th-description">Size</th>
		                                    <th class="text-right">Price</th>
		                                    <th class="text-right">Qty</th>
		                                    <th class="text-right">Amount</th>
		                                    <th></th>
		                                </tr>
		                            </thead>
		                            <tbody>
		                                <tr>
		                                    <td>
		                                        <div class="img-container">
		                                            <img src="img/product1.jpg" alt="...">
		                                        </div>
		                                    </td>
		                                    <td class="td-name">
		                                        <a href="#jacket">Spring Jacket</a>
		                                        <br /><small>by Dolce&Gabbana</small>
		                                    </td>
		                                    <td>
		                                        Red
		                                    </td>
		                                    <td>
		                                        M
		                                    </td>
		                                    <td class="td-number">
		                                        <small>&euro;</small>549
		                                    </td>
		                                    <td class="td-number">
		                                        1
		                                        <div class="btn-group">
		                                            <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">remove</i> </button>
		                                            <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">add</i> </button>
		                                        </div>
		                                    </td>
		                                    <td class="td-number">
		                                        <small>&euro;</small>549
		                                    </td>
		                                    <td class="td-actions">
		                                        <button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-simple">
		                                            <i class="material-icons">close</i>
		                                        </button>
		                                    </td>
		                                </tr>
		                                <tr>
		                                     <td>
		                                        <div class="img-container">
		                                            <img src="img/product2.jpg" alt="..."/>
		                                        </div>
		                                    </td>
		                                    <td class="td-name">
		                                        <a href="#pants">Short Pants</a>
		                                        <br /><small>by Pucci</small>
		                                    </td>
		                                    <td>
		                                        Purple
		                                    </td>
		                                    <td>
		                                        M
		                                    </td>

		                                    <td class="td-number">
		                                        <small>&euro;</small>499
		                                    </td>
		                                    <td class="td-number">
		                                        2
		                                        <div class="btn-group">
		                                            <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">remove</i> </button>
		                                            <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">add</i> </button>
		                                        </div>
		                                    </td>
		                                    <td class="td-number">
		                                        <small>&euro;</small>998
		                                    </td>
		                                    <td class="td-actions">
		                                        <button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-simple">
		                                            <i class="material-icons">close</i>
		                                        </button>
		                                    </td>
		                                </tr>
		                                <tr>
		                                    <td>
		                                        <div class="img-container">
		                                            <img src="img/product3.jpg" alt="...">
		                                        </div>
		                                    </td>
		                                    <td class="td-name">
		                                        <a href="#nothing">Pencil Skirt</a>
		                                        <br /><small>by Valentino</small>
		                                    </td>
		                                    <td>
		                                        White
		                                    </td>
		                                    <td>
		                                        XL
		                                    </td>

		                                    <td class="td-number">
		                                        <small>&euro;</small>799
		                                    </td>
		                                    <td class="td-number">
		                                        1
		                                        <div class="btn-group">
		                                            <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">remove</i> </button>
		                                            <button class="btn btn-round btn-info btn-xs"> <i class="material-icons">add</i> </button>
		                                        </div>
		                                    </td>
		                                    <td class="td-number">
		                                        <small>&euro;</small>799</td>
		                                    <td class="td-actions">
		                                        <button type="button" rel="tooltip" data-placement="left" title="Remove item" class="btn btn-simple">
		                                            <i class="material-icons">close</i>
		                                        </button>
		                                    </td>
		                                </tr>
		                                <tr>
		                                    <td colspan="3">
		                                    </td>
		                                    <td class="td-total">
		                                       Total
		                                    </td>
		                                    <td class="td-price">
		                                        <small>&euro;</small>2,346
		                                    </td>
		                                    <td colspan="3" class="text-right"> <button type="button" class="btn btn-info btn-round">Complete Purchase <i class="material-icons">keyboard_arrow_right</i></button></td>

		                                </tr>
		                            </tbody>
		                        </table>
		                        </div>

		                    </div>
		                </div>
		            </div>
		<!--                 end tables -->

		            <div class="space-50"></div>

		<!--                 comments -->
		            <div id="comments">
		                <div class="title">
		                    <h3>Comments</h3>
		                </div>
		        		<div class="row">
		        			<div class="col-md-8 col-md-offset-2">
		        				<div class="media-area">
		        					<h3 class="title text-center">10 Comments</h3>
		        					<div class="media">
		        						<a class="pull-left" href="#pablo">
		        							<div class="avatar">
		        								<img class="media-object" src="img/faces/avatar.jpg" alt="..."/>
		        							</div>
		        						</a>
		        						<div class="media-body">
		        							<h4 class="media-heading">Tina Andrew <small>&middot; 7 minutes ago</small></h4>
		        							<h6 class="text-muted"></h6>

		        							<p>Chance too good. God level bars. I'm so proud of @LifeOfDesiigner #1 song in the country. Panda! Don't be scared of the truth because we need to restart the human foundation in truth I stand with the most humility. We are so blessed!</p>
		        							<p>All praises and blessings to the families of people who never gave up on dreams. Don't forget, You're Awesome!</p>

		        							<div class="media-footer">
		        								<a href="#pablo" class="btn btn-primary btn-simple pull-right" rel="tooltip" title="Reply to Comment">
		        									<i class="material-icons">reply</i> Reply
		        								</a>
		        								<a href="#pablo" class="btn btn-danger btn-simple pull-right">
		        									<i class="material-icons">favorite</i> 243
		        								</a>
		        							</div>

		        							<div class="media media-post">
		        								<a class="pull-left author" href="#pablo">
		        									<div class="avatar">
		        										<img class="media-object" alt="64x64" src="img/faces/kendall.jpg">
		        									</div>
		        								</a>
		        								<div class="media-body">
		        										<textarea class="form-control" placeholder="Write a nice reply or go home..." rows="4"></textarea>
		        										<div class="media-footer">
		        											<a href="#pablo" class="btn btn-primary pull-right">
		        												<i class="material-icons">reply</i> Reply
		        											</a>
		        										</div>
		        								</div>
		        							</div>
		        						</div>
		        					</div>

		        					<div class="media">
		        					  <a class="pull-left" href="#pablo">
		        						  <div class="avatar">
		        							 <img class="media-object" alt="Tim Picture" src="img/faces/marc.jpg">
		        						  </div>
		        					  </a>
		        					  <div class="media-body">
		        						 <h4 class="media-heading">John Camber <small>&middot; Yesterday</small></h4>

		        						 <p>Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.</p>
		        						 <p> Don't forget, You're Awesome!</p>

		        						<div class="media-footer">
		        							<a href="#pablo" class="btn btn-primary btn-simple pull-right" rel="tooltip" title="Reply to Comment">
		        								<i class="material-icons">reply</i> Reply
		        							</a>
		        							<a href="#pablo" class="btn btn-default btn-simple pull-right">
		        								<i class="material-icons">favorite</i> 25
		        							</a>
		        						 </div>
		        						 <div class="media">
		        							  <a class="pull-left" href="#pablo">
		        									<div class="avatar">
		        										<img class="media-object" alt="64x64" src="img/faces/avatar.jpg">
		        									</div>
		        							  </a>
		        							  <div class="media-body">
		        									<h4 class="media-heading">Tina Andrew <small>&middot; 2 Days Ago</small></h4>

		        									<p>Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.</p>
		        									<p> Don't forget, You're Awesome!</p>

		        									<div class="media-footer">
		        										<a href="#pablo" class="btn btn-primary btn-simple pull-right" rel="tooltip" title="Reply to Comment">
		        											<i class="material-icons">reply</i> Reply
		        										</a>
		        										<a href="#pablo" class="btn btn-danger btn-simple pull-right">
		        											<i class="material-icons">favorite</i> 243
		        										</a>
		        									</div>
		        							  </div>
		        						  </div>
		        					  </div>
		        					</div>

		        					<div class="media">
		        						  <a class="pull-left" href="#pablo">
		        							  <div class="avatar">
		        									<img class="media-object" alt="64x64" src="img/faces/kendall.jpg">
		        							  </div>
		        						  </a>
		        						  <div class="media-body">
		        								<h4 class="media-heading">Rosa Thompson <small>&middot; 2 Days Ago</small></h4>

		        								<p>Hello guys, nice to have you on the platform! There will be a lot of great stuff coming soon. We will keep you posted for the latest news.</p>
		        								<p> Don't forget, You're Awesome!</p>

		        								<div class="media-footer">
		        									<a href="#pablo" class="btn btn-primary btn-simple pull-right" rel="tooltip" title="Reply to Comment">
		        										<i class="material-icons">reply</i> Reply
		        									</a>
		        									<a href="#pablo" class="btn btn-danger btn-simple pull-right">
		        										<i class="material-icons">favorite</i> 243
		        									</a>
		        								</div>
		        						  </div>
		        					</div>

		        					<div class="pagination-area text-center">
		        						<ul class="pagination">
		        							<li><a href="#pablo">&laquo;</a></li>
		        							<li><a href="#pablo">1</a></li>
		        							<li><a href="#pablo">2</a></li>
		        							<li class="active"><a href="#pablo">3</a></li>
		        							<li><a href="#pablo">4</a></li>
		        							<li><a href="#pablo">5</a></li>
		        							<li><a href="#pablo">&raquo;</a></li>
		        						 </ul>
		        					</div>
		        				</div>


		                          <h3 class="text-center">Post your comment <br><small>- Logged In User -</small></h3>
		                          <div class="media media-post">
		                              <a class="pull-left author" href="#pablo">
		                                  <div class="avatar">
		                                        <img class="media-object" alt="64x64" src="img/faces/avatar.jpg">
		                                  </div>
		                              </a>
		                              <div class="media-body">
		                                    <textarea class="form-control" placeholder="Write some nice stuff or nothing..." rows="6"></textarea>
		                                    <div class="media-footer">
		                                         <a href="#pablo" class="btn btn-primary btn-wd pull-right">Post Comment</a>
		                                    </div>
		                              </div>
		                          </div> <!-- end media-post -->

		                          <h3 class="text-center">Post your comment <br><small>- Not Logged In User -</small></h3>
		                          <div class="media media-post">
		        	                      <a class="pull-left author" href="#pablo">
		        	                          <div class="avatar">
		        	                                <img class="media-object" alt="64x64" src="img/placeholder.jpg"/>
		        	                          </div>
		        	                      </a>
		        	                      <div class="media-body">
		        								<form class="form">
		        		                            <div class="row">
		        		                                <div class="col-md-6">
		        		                                    <div class="form-group">
		        		                                         <input type="text" class="form-control" placeholder="Your Name"/>
		        		                                    </div>
		        		                                </div>
		        		                                <div class="col-md-6">
		        		                                    <div class="form-group">
		        		                                         <input type="email" class="form-control" placeholder="Your email"/>
		        		                                    </div>
		        		                                </div>
		        		                            </div>
		        		                            <textarea class="form-control" placeholder="Write some nice stuff or nothing..." rows="6"></textarea>
		        		                            <div class="media-footer">
		        		                                <h6>Sign in with</h6>
		        		                                <a href="" class="btn btn-just-icon btn-round btn-twitter">
		        		                                      <i class="fa fa-twitter"></i>
		        		                                </a>
		        		                                <a href="" class="btn btn-just-icon btn-round btn-facebook">
		        		                                      <i class="fa fa-facebook-square"></i>
		        		                                </a>
		        		                                <a href="" class="btn btn-just-icon btn-round btn-google">
		        		                                      <i class="fa fa-google-plus-square"></i>
		        		                                </a>
		        		                                <a href="#pablo" class="btn btn-primary pull-right">Post Comment</a>
		        		                            </div>
		        								</form>

		        	                      </div><!-- end media-body -->

		                          </div> <!-- end media-post -->


		        			</div>
		        		</div>
		            </div>
					<!--                 end comments                 -->
				</div>

	        </div>
	    </div>

	<!--         cards -->
	    <div id="cards" class="cd-section">
	    	<div class="section-gray">
	    		<!--     *********    BLOG CARDS     *********      -->

	    		<div class="cards">

	    			<div class="container">
	        			<div class="title">
	            			<h2>Cards</h2>
	    				    <h3>Blog Cards</h3>
	        			</div>
	    				<div class="row">
	    					<div class="col-md-4">

	    						<div class="card card-blog">
	    							<div class="card-image">
	    								<a href="#pablo">
	    									<img class="img" src="img/examples/card-blog1.jpg" />
	    									<div class="card-title">
	    										This Summer Will be Awesome
	    									</div>
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h6 class="category text-info">Fashion</h6>
	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>
	    							</div>
	    						</div>

	    						<div class="card">
	    							<div class="content content-info">
	    								<h5 class="category-social">
	    									<i class="fa fa-twitter"></i> Twitter
	    								</h5>
	    								<h4 class="card-title">
	    									<a href="#pablo">"You Don't Have to Sacrifice Joy to Build a Fabulous Business and Life"</a>
	    								</h4>
	    								<div class="footer">
	    	                                <div class="author">
	    	                                    <a href="#pablo">
	    	                                       <img src="img/faces/avatar.jpg" alt="..." class="avatar img-raised">
	    	                                       <span>Tania Andrew</span>
	    	                                    </a>
	    	                                </div>
	    	                               <div class="stats">
	    	                                    <i class="material-icons">favorite</i> 2.4K &middot;
	    										<i class="material-icons">share</i> 45
	    	                                </div>
	    	                            </div>

	    							</div>
	    						</div>

	    					</div>

	    					<div class="col-md-4">

	    						<div class="card">
	    							<div class="content">
	    								<h6 class="category text-danger">
	    									<i class="material-icons">trending_up</i> Trending
	    								</h6>

	    								<h4 class="card-title">
	    									<a href="#pablo">To Grow Your Business Start Focusing on Your Employees</a>
	    								</h4>

	    								<div class="footer">
	    	                                <div class="author">
	    	                                    <a href="#pablo">
	    	                                       <img src="img/faces/christian.jpg" alt="..." class="avatar img-raised">
	    	                                       <span>Lord Alex</span>
	    	                                    </a>
	    	                                </div>
	    	                               <div class="stats">
	    	                                    <i class="material-icons">favorite</i> 342 &middot;
	    										<i class="material-icons">chat_bubble</i> 45
	    	                                </div>
	    	                            </div>

	    							</div>

	    						</div>


	    						<div class="card card-blog">
	    							<div class="card-image">
	    								<a href="#pablo">
	    									<img class="img" src="img/examples/card-blog2.jpg" />
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h6 class="category text-success">Legal</h6>

	    								<h4 class="card-title">
	    									<a href="#pablo">5 Common Legal Mistakes That Can Trip-Up Your Startup</a>
	    								</h4>
	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>
	    								<div class="footer">
	    	                                <div class="author">
	    	                                    <a href="#pablo">
	    	                                       <img src="img/faces/marc.jpg" alt="..." class="avatar img-raised">
	    	                                       <span>Mike John</span>
	    	                                    </a>
	    	                                </div>
	    	                               <div class="stats">
	    	                                    <i class="material-icons">schedule</i> 5 min read
	    	                                </div>
	    	                            </div>

	    							</div>

	    						</div>

	    					</div>


	    					<div class="col-md-4">

	    						<div class="card card-blog">
	    							<div class="card-image">
	    								<a href="#pablo">
	    									<img class="img" src="img/examples/blog8.jpg" />
	    								</a>
	    							</div>
	    							<div class="content">
	    								<h6 class="category text-danger">
	    									<i class="material-icons">trending_up</i> Trending
	    								</h6>
	    								<h4 class="card-title">
	    									<a href="#pablo">To Grow Your Business Start Focusing on Your Employees</a>
	    								</h4>
	    								<div class="footer">
	    	                                <div class="author">
	    	                                    <a href="#pablo">
	    	                                       <img src="img/faces/marc.jpg" alt="..." class="avatar img-raised">
	    	                                       <span>Mike John</span>
	    	                                    </a>
	    	                                </div>
	    	                               <div class="stats">
	    	                                    <i class="material-icons">schedule</i> 5 min read
	    	                                </div>
	    	                            </div>
	    							</div>
	    						</div>

	    						<div class="card">
	    							<div class="content content-success">
	    								<h5 class="category-social">
	    									<i class="fa fa-newspaper-o"></i> TechCrunch
	    								</h5>
	    								<h4 class="card-title">
	    									<a href="#pablo">"Focus on Your Employees"</a>
	    								</h4>
	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>
	    								<div class="footer text-center">
	    	                                <a href="#pablo" class="btn btn-white btn-round">Read Article</a>
	    	                            </div>
	    							</div>
	    						</div>

	    					</div>

	    				</div>
	    			</div>

	    		</div>

	    		<!--     *********    END BLOG CARDS      *********      -->


	    		<!--     *********    PROFILE CARDS     *********      -->

	    		<div class="cards">

	    			<div class="container">
	        			<div class="title">
	    				    <h3>Profile Cards</h3>
	        			</div>
	    				<div class="row">
	    					<div class="col-md-4">

	    						<div class="card card-profile">
	    							<div class="card-image">
	    								<a href="#pablo">
	    									<img class="img" src="img/examples/card-profile4.jpg" />

	    									<div class="card-title">
	    										Tania Andrew
	    									</div>
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h6 class="category text-info">Web Designer</h6>

	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>

	    								<div class="footer">
	    									<a href="#pablo" class="btn btn-just-icon btn-simple btn-twitter"><i class="fa fa-twitter"></i></a>
	    									<a href="#pablo" class="btn btn-just-icon btn-simple btn-dribbble"><i class="fa fa-dribbble"></i></a>
	    									<a href="#pablo" class="btn btn-just-icon btn-simple btn-instagram"><i class="fa fa-instagram"></i></a>
	    								</div>
	    							</div>
	    						</div>
	    					</div>

	    					<div class="col-md-4">
	    						<div class="card card-profile">
	    							<div class="card-image">
	    								<a href="#pablo">
	    									<img class="img" src="img/examples/card-profile1.jpg" />
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h4 class="card-title">Alec Thompson</h4>
	    								<h6 class="category text-gray">CEO / Co-Founder</h6>

	    								<div class="footer">
	    									<a href="#pablo" class="btn btn-just-icon btn-twitter btn-round"><i class="fa fa-twitter"></i></a>
	    									<a href="#pablo" class="btn btn-just-icon btn-facebook btn-round"><i class="fa fa-facebook-square"></i></a>
	    									<a href="#pablo" class="btn btn-just-icon btn-google btn-round"><i class="fa fa-google"></i></a>
	    								</div>
	    							</div>
	    						</div>
	    					</div>

	    					<div class="col-md-4">
	    						<div class="card card-profile">
	    							<div class="card-avatar">
	    								<a href="#pablo">
	    									<img class="img" src="img/faces/marc.jpg" />
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h6 class="category text-gray">CEO / Co-Founder</h6>

	    								<h4 class="card-title">Alec Thompson</h4>

	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>
	    								<a href="#pablo" class="btn btn-info btn-round">Follow</a>
	    							</div>
	    						</div>
	    					</div>

	    				</div>
	    			</div>

	    		</div>
	    		<!--     *********    END PROFILE CARDS      *********      -->



	    		<!--     *********    PRODUCT CARDS     *********      -->

	    		<div class="cards">

	    			<div class="container">
	        			<div class="title">
	    				    <h3>Full Background Cards</h3>
	        			</div>

	    				<div class="row">
	    					<div class="col-md-6">

	    						<div class="card card-background" style="background-image: url('img/examples/office1.jpg')">

	    							<div class="content">
	    								<h6 class="category text-info">Productivy Apps</h6>
	    								<a href="#pablo">
	    									<h3 class="card-title">The Best Productivity Apps on Market</h3>
	    								</a>
	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>
	    								<a href="#pablo" class="btn btn-white btn-simple">
	    									<i class="material-icons">subject</i> Read Article
	    								</a>
	    								<a href="#pablo" class="btn btn-white btn-simple">
	    									<i class="material-icons">watch_later</i> Watch Later
	    								</a>
	    							</div>
	    						</div>
	    					</div>

	    					<div class="col-md-6">
	    						<div class="card card-background" style="background-image: url('img/examples/card-blog3.jpg')">
	    							<div class="content">
	    								<h6 class="category text-info">Materials</h6>
	    								<h3 class="card-title">The Sculpture Where Details Matter</h3>
	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>
	    								<a href="#pablo" class="btn btn-danger btn-round">
	    									<i class="material-icons">subject</i> Read Article
	    								</a>
	    							</div>
	    						</div>
	    					</div>

	    				</div>
	    			</div>

	    		</div>
	    		<!--     *********    END PRODUCT CARDS      *********      -->

	    		<!--     *********    PRICING CARDS     *********      -->

	    		<div class="cards">

	    			<div class="container">
	        			<div class="title">
	    				    <h3>Pricing Cards</h3>
	        			</div>

	    				<div class="row">

	    					<div class="col-md-3">
	    						<div class="card card-pricing">
	    							<div class="content">
	    								<h6 class="category text-gray">Small Company</h6>
	    								<div class="icon icon-info">
	    									<i class="material-icons">people</i>
	    								</div>
	    								<h3 class="card-title">$29</h3>
	    								<p class="card-description">
	    									This is good if your company size is between 2 and 10 Persons.
	    								</p>
	    								<a href="#pablo" class="btn btn-info btn-round">Choose Plan</a>
	    							</div>
	    						</div>
	    					</div>

	    					<div class="col-md-3">
	    						<div class="card card-pricing">
	    							<div class="content content-primary">
	    								<div class="icon">
	    									<i class="material-icons">business</i>
	    								</div>
	    								<h3 class="card-title">$69</h3>
	    								<p class="card-description">
	    									This is good if your company size is between 11 and 99 Persons.
	    								</p>
	    								<a href="#pablo" class="btn btn-white btn-round">Choose Plan</a>
	    							</div>
	    						</div>
	    					</div>

	    					<div class="col-md-3">
	    						<div class="card card-pricing card-background" style="background-image: url('img/examples/card-blog3.jpg')">
	    							<div class="content">
	    								<h6 class="category text-info">Premium</h6>
	    								<h1 class="card-title"><small>$</small>89</h1>
	    								<ul>
	    									<li><b>100</b> Projects</li>
	    									<li><b>5</b> Team Members</li>
	    									<li><b>55</b> Personal Contacts</li>
	    									<li><b>5.000</b> Messages</li>
	    								</ul>
	    								<a href="#pablo" class="btn btn-danger">
	    									Get Started
	    								</a>
	    							</div>
	    						</div>
	    					</div>

	    					<div class="col-md-3">
	    						<div class="card card-pricing">
	    							<div class="content">
	    								<h6 class="category text-success">Platinum</h6>
	    								<h1 class="card-title"><small>$</small>89</h1>
	    								<ul>
	    									<li><i class="material-icons text-success">check</i> Sharing Tools</li>
	    									<li><i class="material-icons text-success">check</i> Design Tools</li>
	    									<li><i class="material-icons text-danger">close</i> Private Messages</li>
	    									<li><i class="material-icons text-danger">close</i> Personal Brand</li>
	    								</ul>
	    								<a href="#pablo" class="btn btn-primary btn-round">
	    									Get Started
	    								</a>
	    							</div>
	    						</div>
	    					</div>

	    				</div>
	    			</div>

	    		</div>
	    		<!--     *********    END PRICING CARDS      *********      -->

	    	</div>


	    	<div class="section-white">

	    		<div class="cards">

	    			<div class="container">
	        			<div class="title">
	    				    <h3>Plain Cards</h3>
	        			</div>

	    				<div class="row">
	    					<div class="col-md-4">

	    						<div class="card card-blog card-plain">
	    							<div class="card-image">
	    								<a href="#pablo">
	    									<img class="img" src="img/examples/blog5.jpg" />
	    									<div class="card-title">
	    										This Summer Will be Awesome
	    									</div>
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h6 class="category text-info">Fashion</h6>

	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>
	    							</div>
	    						</div>

	    						<div class="card">
	    							<div class="content content-info">
	    								<h5 class="category-social">
	    									<i class="fa fa-twitter"></i> Twitter
	    								</h5>
	    								<h4 class="card-title">
	    									<a href="#pablo">"You Don't Have to Sacrifice Joy to Build a Fabulous Business and Life"</a>
	    								</h4>
	    								<div class="footer">
	    	                                <div class="author">
	    	                                    <a href="#pablo">
	    	                                       <img src="img/faces/avatar.jpg" alt="..." class="avatar img-raised">
	    	                                       <span>Tania Andrew</span>
	    	                                    </a>
	    	                                </div>
	    	                               <div class="stats">
	    	                                    <i class="material-icons">favorite</i> 2.4K &middot;
	    										<i class="material-icons">share</i> 45
	    	                                </div>
	    	                            </div>

	    							</div>
	    						</div>

	    					</div>

	    					<div class="col-md-4">
	    						<div class="card card-blog card-plain">
	    							<div class="card-image">
	    								<a href="#pablo">
	    									<img class="img" src="img/examples/blog1.jpg" />
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h6 class="category text-success">Legal</h6>

	    								<h4 class="card-title">
	    									<a href="#pablo">5 Common Legal Mistakes That Can Trip-Up Your Startup</a>
	    								</h4>
	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>
	    								<div class="footer">
	    	                                <div class="author">
	    	                                    <a href="#pablo">
	    	                                       <img src="img/faces/marc.jpg" alt="..." class="avatar img-raised">
	    	                                       <span>Mike John</span>
	    	                                    </a>
	    	                                </div>
	    	                               <div class="stats">
	    	                                    <i class="material-icons">schedule</i> 5 min read
	    	                                </div>
	    	                            </div>

	    							</div>
	    						</div>

	    					</div>


	    					<div class="col-md-4">

	    						<div class="card card-blog card-plain">
	    							<div class="card-image">
	    								<a href="#pablo">
	    									<img class="img" src="img/examples/blog6.jpg" />
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h6 class="category text-danger">
	    									<i class="material-icons">trending_up</i> Trending
	    								</h6>

	    								<h4 class="card-title">
	    									<a href="#pablo">To Grow Your Business Start Focusing on Your Employees</a>
	    								</h4>

	    								<div class="footer">
	    	                                <div class="author">
	    	                                    <a href="#pablo">
	    	                                       <img src="img/faces/marc.jpg" alt="..." class="avatar img-raised">
	    	                                       <span>Mike John</span>
	    	                                    </a>
	    	                                </div>
	    	                               <div class="stats">
	    	                                    <i class="material-icons">schedule</i> 5 min read
	    	                                </div>
	    	                            </div>

	    							</div>

	    						</div>

	    						<div class="card">
	    							<div class="content content-danger">
	    								<h5 class="category-social">
	    									<i class="fa fa-newspaper-o"></i> The Next Web
	    								</h5>
	    								<h4 class="card-title">
	    									<a href="#pablo">"Focus on Your Employees"</a>
	    								</h4>
	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>
	    								<div class="footer text-center">
	    	                                <a href="#pablo" class="btn btn-white btn-round">Read Article</a>
	    	                            </div>

	    							</div>
	    						</div>

	    					</div>

	    				</div>
	    			</div>

	    		</div>

	    		<!--     *********    END BLOG CARDS      *********      -->


	    		<!--     *********    PROFILE CARDS     *********      -->

	    		<div class="cards">

	    			<div class="container">
	    				<div class="row">
	    					<div class="col-md-4">

	    						<div class="card card-profile card-plain">
	    							<div class="card-image">
	    								<a href="#pablo">
	    									<img class="img" src="img/examples/card-profile4.jpg" />
	    									<div class="card-title">
	    										Tania Andrew
	    									</div>
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h6 class="category text-info">Web Designer</h6>

	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>

	    								<div class="footer">
	    									<a href="#pablo" class="btn btn-just-icon btn-simple btn-twitter"><i class="fa fa-twitter"></i></a>
	    									<a href="#pablo" class="btn btn-just-icon btn-simple btn-dribbble"><i class="fa fa-dribbble"></i></a>
	    									<a href="#pablo" class="btn btn-just-icon btn-simple btn-instagram"><i class="fa fa-instagram"></i></a>
	    								</div>
	    							</div>
	    						</div>
	    					</div>

	    					<div class="col-md-4">
	    						<div class="card card-profile card-plain">
	    							<div class="card-image">
	    								<a href="#pablo">
	    									<img class="img" src="img/examples/card-profile1.jpg" />
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h4 class="card-title">Alec Thompson</h4>
	    								<h6 class="category text-gray">CEO / Co-Founder</h6>

	    								<div class="footer">
	    									<a href="#pablo" class="btn btn-just-icon btn-twitter btn-round"><i class="fa fa-twitter"></i></a>
	    									<a href="#pablo" class="btn btn-just-icon btn-facebook btn-round"><i class="fa fa-facebook-square"></i></a>
	    									<a href="#pablo" class="btn btn-just-icon btn-google btn-round"><i class="fa fa-google"></i></a>
	    								</div>
	    							</div>
	    						</div>
	    					</div>

	    					<div class="col-md-4">
	    						<div class="card card-profile card-plain">
	    							<div class="card-avatar">
	    								<a href="#pablo">
	    									<img class="img" src="img/faces/marc.jpg" />
	    								</a>
	    							</div>

	    							<div class="content">
	    								<h6 class="category text-gray">CEO / Co-Founder</h6>

	    								<h4 class="card-title">Alec Thompson</h4>

	    								<p class="card-description">
	    									Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens’ bed design but the back is...
	    								</p>
	    								<a href="#pablo" class="btn btn-info btn-round">Follow</a>
	    							</div>
	    						</div>
	    					</div>

	    				</div>
	    			</div>

	    		</div>
	    		<!--     *********    END PROFILE CARDS      *********      -->

	    	</div>

	    </div>
	<!--         end cards         -->

	    <div class="section cd-section" id="javascriptComponents">
	        <div class="container">
	            <div class="title">
	                <h2>Javascript components</h2>
	            </div>

	<!--                 modals -->
	            <div class="row" id="modals">
	                <div class="col-md-6">
	                    <div class="title">
	                        <h3>Modal</h3>
	                    </div>

	                    <button class="btn btn-primary btn-raised btn-round" data-toggle="modal" data-target="#myModal">
		                      Classic modal
		                    </button>
	                    <button class="btn btn-raised btn-round btn-info" data-toggle="modal" data-target="#noticeModal">
	                              Notice modal
	                    </button>
	                    <button class="btn btn-raised btn-round btn-rose" data-toggle="modal" data-target="#smallAlertModal">
	                              Small alert modal
	                    </button>

	                </div>
	                <div class="col-md-6">
						<div class="title">
	                        <h3>Popovers</h3>
	                    </div>

	                    <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="Popover on left" data-content="Here will be some very useful information about his popover.<br> Here will be some very useful information about his popover." data-container="body">On left</button>

						<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="Popover on top" data-content="Here will be some very useful information about his popover." data-container="body">On top</button>

						<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="Popover on bottom" data-content="Here will be some very useful information about his popover." data-container="body">On bottom</button>

	                    <button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="Popover on right" data-content="Here will be some very useful information about his popover." data-container="body">On right</button>

	                </div>
	                <br /><br />

		            <div class="col-md-6">
		                <div class="title">
		                    <h3>Datepicker</h3>
		                </div>
		                <div class="row">
		                    <div class="col-md-6">
								<div class="form-group label-static">
									<label class="control-label">Datepicker</label>
									<input type="text" class="datepicker form-control" value="03/12/2016" />
								</div>

		                    </div>
		                </div>
		            </div>

		            <div class="col-md-6">
						<div class="title">
							<h3>Tooltips</h3>
						</div>

						<button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="left" title="Tooltip on left" data-container="body">On left</button>

						<button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="top" title="Tooltip on top" data-container="body">On top</button>

						<button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom" data-container="body">On bottom</button>

						<button type="button" class="btn btn-default btn-tooltip" data-toggle="tooltip" data-placement="right" title="Tooltip on right" data-container="body">On right</button>

		                <div class="clearfix"></div><br><br>
		            </div>

				</div>
	<!--                 end modals	             -->

	<!--                 collapse -->
	            <div id="collapse">
	                <div class="title">
	                    <h3>Collapse</h3>
	                </div>
	                <div class="row">
	                    <div class="col-md-8">
	                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
	                          <div class="panel panel-default">
	                            <div class="panel-heading" role="tab" id="headingOne">
	                                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
	                                    <h4 class="panel-title">
	                                    Collapsible Group Item #1
	                                    <i class="material-icons">keyboard_arrow_down</i>
	                                    </h4>
	                                </a>
	                            </div>
	                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
	                              <div class="panel-body">
	                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
	                              </div>
	                            </div>
	                          </div>
	                          <div class="panel panel-default">
	                            <div class="panel-heading" role="tab" id="headingTwo">
	                              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
	                                <h4 class="panel-title">
	                                  Collapsible Group Item #2
	                                  <i class="material-icons">keyboard_arrow_down</i>
	                                </h4>
	                              </a>
	                            </div>
	                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
	                              <div class="panel-body">
	                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
	                              </div>
	                            </div>
	                          </div>
	                          <div class="panel panel-default">
	                            <div class="panel-heading" role="tab" id="headingThree">
	                              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
	                                <h4 class="panel-title">
	                                  Collapsible Group Item #3
	                                  <i class="material-icons">keyboard_arrow_down</i>
	                                </h4>
	                              </a>
	                            </div>
	                            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
	                              <div class="panel-body">
	                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
	                              </div>
	                            </div>
	                          </div>
	                        </div>
	                    </div>
	                </div>
	            </div>
	<!--                 end collapse -->

	            <div class="space-50"></div>

	<!-- 	            file uploader -->
	            <div id="file-uploader">
		            <div class="title">
	    	            <h3>File Uploader</h3>
		            </div>

					<div class="row">

						<div class="col-md-5 col-sm-8">
							<h4><small>Regular Image</small></h4>
							<div class="fileinput fileinput-new text-center" data-provides="fileinput">
								<div class="fileinput-new thumbnail img-raised">
									<img src="img/image_placeholder.jpg" alt="...">
								</div>
								<div class="fileinput-preview fileinput-exists thumbnail img-raised"></div>
								<div>
									<span class="btn btn-raised btn-round btn-default btn-file">
										<span class="fileinput-new">Select image</span>
										<span class="fileinput-exists">Change</span>
										<input type="file" name="..." />
									</span>
									<a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
								</div>
							</div>
						</div>

						<div class="col-md-3 col-sm-4">
							<h4><small>Avatar</small></h4>
							<div class="fileinput fileinput-new text-center" data-provides="fileinput">
								<div class="fileinput-new thumbnail img-circle img-raised">
									<img src="img/placeholder.jpg" alt="...">
								</div>
								<div class="fileinput-preview fileinput-exists thumbnail img-circle img-raised"></div>
								<div>
									<span class="btn btn-raised btn-round btn-default btn-file">
										<span class="fileinput-new">Add Photo</span>
										<span class="fileinput-exists">Change</span>
										<input type="file" name="..." /></span>
									<br />
									<a href="#pablo" class="btn btn-danger btn-round fileinput-exists" data-dismiss="fileinput"><i class="fa fa-times"></i> Remove</a>
								</div>
							</div>
						</div>
	                </div>
	            </div>

	            <div class="title">
	                <h3>Carousel</h3>
	            </div>
			</div>
		</div>

	<!--         carousel  -->
	    <div class="section" id="carousel">
			<div class="container">
				<div class="row">
					<div class="col-md-8 col-md-offset-2">

						<!-- Carousel Card -->
						<div class="card card-raised card-carousel">
							<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
								<div class="carousel slide" data-ride="carousel">

									<!-- Indicators -->
									<ol class="carousel-indicators">
										<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
										<li data-target="#carousel-example-generic" data-slide-to="1"></li>
										<li data-target="#carousel-example-generic" data-slide-to="2"></li>
									</ol>

									<!-- Wrapper for slides -->
									<div class="carousel-inner">
										<div class="item active">
											<img src="img/bg2.jpg" alt="Awesome Image">
											<div class="carousel-caption">
												<h4><i class="material-icons">location_on</i> Yellowstone National Park, United States</h4>
											</div>
										</div>
										<div class="item">
											<img src="img/bg3.jpg" alt="Awesome Image">
											<div class="carousel-caption">
												<h4><i class="material-icons">location_on</i> Somewhere Beyond, United States</h4>
											</div>
										</div>
										<div class="item">
											<img src="img/bg.jpg" alt="Awesome Image">
											<div class="carousel-caption">
												<h4><i class="material-icons">location_on</i> Yellowstone National Park, United States</h4>
											</div>
										</div>
									</div>

									<!-- Controls -->
									<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
										<i class="material-icons">keyboard_arrow_left</i>
									</a>
									<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
										<i class="material-icons">keyboard_arrow_right</i>
									</a>
								</div>
							</div>
						</div>
						<!-- End Carousel Card -->

					</div>
				</div>
			</div>
		</div>
<!--         end carousel -->




    <footer class="footer">
	    <div class="container">
	        <nav class="pull-left">
	            <ul>
					<li>
						<a href="http://www.creative-tim.com">
							Creative Tim
						</a>
					</li>
					<li>
						<a href="http://presentation.creative-tim.com">
						   About Us
						</a>
					</li>
					<li>
						<a href="http://blog.creative-tim.com">
						   Blog
						</a>
					</li>
					<li>
						<a href="http://www.creative-tim.com/license">
							Licenses
						</a>
					</li>
	            </ul>
	        </nav>
	        <div class="copyright pull-right">
	            &copy; <script>document.write(new Date().getFullYear())</script>, made with <i class="material-icons">favorite</i> by Creative Tim for a better web.
	        </div>
	    </div>
	</footer>
</div>


<nav id="cd-vertical-nav">
	<ul>
		<li>
			<a href="#buttons" data-number="1">
				<span class="cd-dot"></span>
				<span class="cd-label">Basic Elements</span>
			</a>
		</li>
		<li>
			<a href="#navigation" data-number="2">
				<span class="cd-dot"></span>
				<span class="cd-label">Navigation</span>
			</a>
		</li>
		<li>
			<a href="#notifications" data-number="3">
				<span class="cd-dot"></span>
				<span class="cd-label">Notifications</span>
			</a>
		</li>
		<li>
			<a href="#footers" data-number="4">
				<span class="cd-dot"></span>
				<span class="cd-label">Footers</span>
			</a>
		</li>
		<li>
			<a href="#typography" data-number="5">
				<span class="cd-dot"></span>
				<span class="cd-label">Typography</span>
			</a>
		</li>
		<li>
			<a href="#contentAreas" data-number="6">
				<span class="cd-dot"></span>
				<span class="cd-label">Content Areas</span>
			</a>
		</li>
		<li>
			<a href="#cards" data-number="7">
				<span class="cd-dot"></span>
				<span class="cd-label">Cards</span>
			</a>
		</li>
		<li>
			<a href="#javascriptComponents" data-number="8">
				<span class="cd-dot"></span>
				<span class="cd-label">Javascript</span>
			</a>
		</li>
	</ul>
</nav>

<!-- Classic Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					<i class="material-icons">clear</i>
				</button>
				<h4 class="modal-title">Modal title</h4>
			</div>
			<div class="modal-body">
				<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
				</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-simple">Nice Button</button>
				<button type="button" class="btn btn-danger btn-simple" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
<!--  End Modal -->

<!-- notice modal -->
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-notice">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="material-icons">clear</i></button>
        <h5 class="modal-title" id="myModalLabel">How Do You Become an Affiliate?</h5>
      </div>
      <div class="modal-body">
        <div class="instruction">
            <div class="row">
                <div class="col-md-8">
                     <strong>1. Register</strong>
                     <p>The first step is to create an account at <a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.</p>
                </div>
                <div class="col-md-4">
                    <div class="picture">
                        <img src="img/dg1.jpg" alt="Thumbnail Image"  class="img-rounded img-responsive">
                    </div>
                </div>
            </div>
        </div>
        <div class="instruction">
            <div class="row">
                <div class="col-md-8">
                        <strong>2. Apply</strong>
                        <p>The first step is to create an account at <a href="http://www.creative-tim.com/">Creative Tim</a>. You can choose a social network or go for the classic version, whatever works best for you.</p>
                </div>
                <div class="col-md-4">
                    <div class="picture">
                        <img src="img/dg2.jpg" alt="Thumbnail Image"  class="img-rounded img-responsive">
                    </div>
                </div>
            </div>
        </div>
        <p>If you have more questions, don't hesitate to contact us or send us a tweet @creativetim. We're here to help!</p>
      </div>
      <div class="modal-footer text-center">
            <button type="button" class="btn btn-info btn-round" data-dismiss="modal">Sounds good!</button>
      </div>
    </div>
  </div>
</div>
<!-- end notice modal -->

<!-- small modal -->
<div class="modal fade" id="smallAlertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-small ">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="material-icons">clear</i></button>
      </div>
      <div class="modal-body text-center">
        <h5>Are you sure you want to do this? </h5>
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn btn-simple" data-dismiss="modal">Never mind</button>
        <button type="button" class="btn btn-success btn-simple">Yes</button>
      </div>
    </div>
  </div>
</div>
<!--    end small modal -->


</body>
	<!--   Core JS Files   -->
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
	<script src="js/material.min.js"></script>

	<!--	Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
	<script src="js/nouislider.min.js" type="text/javascript"></script>

	<!--	Plugin for the Datepicker, full documentation here: http://www.eyecon.ro/bootstrap-datepicker/ -->
	<script src="js/bootstrap-datepicker.js" type="text/javascript"></script>

	<!--	Plugin for Select Form control, full documentation here: https://github.com/FezVrasta/dropdown.js -->
	<script src="js/jquery.dropdown.js" type="text/javascript"></script>

	<!--	Plugin for Tags, full documentation here: http://xoxco.com/projects/code/tagsinput/  -->
	<script src="js/jquery.tagsinput.js"></script>

	<!--	Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput -->
	<script src="js/jasny-bootstrap.min.js"></script>

	<!-- Plugin For Google Maps -->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>

	<!-- Control Center for Material Kit: activating the ripples, parallax effects, scripts from the example pages etc -->
	<script src="js/material-kit.js" type="text/javascript"></script>

	<!-- Fixed Sidebar Nav - JS For Demo Purpose, Don't Include it in your project -->
	<script src="for-demo/modernizr.js" type="text/javascript"></script>
	<script src="for-demo/vertical-nav.js" type="text/javascript"></script>

	<script type="text/javascript">

		$().ready(function(){
			$('#sliderRegular').noUiSlider({
	            start: 40,
	            connect: "lower",
	            range: {
	                min: 0,
	                max: 100
	            }
	        });

	        $('#sliderDouble').noUiSlider({
	            start: [20, 60] ,
	            connect: true,
	            range: {
	                min: 0,
	                max: 100
	            }
	        });

		});
	</script>
</html>
